web-dev-qa-db-ja.com

HTMLのチェックボックスを読み取り専用に設定できますか？

私はそれらが可能であると思いました、しかし私が私の口が（いわば）readonly属性を設定するところに私のお金を置いていないので実際には何もしないようです。

チェックボックスをフォームの他の部分と一緒に送信する必要があるので、Disabledを使用したくはありません。クライアントが特定の状況下でそれらを変更できないようにしたいだけです。

htmlcheckbox
752
Electrons_Ahoy

あなたはこれを使用することができます：

<input type="checkbox" onclick="return false;"/>

Clickイベントからfalseを返すことで実行の連鎖が止まるので、これはうまくいきます。

485
Yanni

READONLYはフィールドの value を編集できないのでチェックボックスでは機能しませんが、チェックボックスでは実際にフィールドの state を編集しています（on || off）

faqs.org ：から

READONLYは、ユーザーがフィールドと対話するのではなく、単にフィールドの値を変更するのを妨げるだけであることを理解することが重要です。たとえば、チェックボックスでは、チェックボックスをオンまたはオフにしてチェックマークを付けることができますが、フィールドの値は変更しません。

disabledを使用したくないが、それでも値を送信したい場合は、値を隠しフィールドとして送信し、編集条件に合わないときにその内容をユーザーに表示するだけでよいでしょうか。例えば.

// user allowed change
if($user_allowed_edit)
{
    echo '<input type="checkbox" name="my_check"> Check value';
}
else
{
    // Not allowed change - submit value..
    echo '<input type="hidden" name="my_check" value="1" />';
    // .. and show user the value being submitted
    echo '<input type="checkbox" disabled readonly> Check value';
}
405
ConroyP

これは変更できないチェックボックスです。

<input type="checkbox" disabled="disabled" checked="checked">

属性としてdisabled="disabled"を追加するだけです。


コメントに対処するために編集します。

データをポストバックしたい場合、単純な解決策は同じ名前を隠し入力に適用することです。

<input name="myvalue" type="checkbox" disabled="disabled" checked="checked"/>
<input name="myvalue" type="hidden" value="true"/>

このように、チェックボックスが「無効」に設定されていると、実際にはデータに「リンク」されているのではなく、データを視覚的に表現する目的にのみ役立ちます。ポストバックでは、チェックボックスが無効になっているときに非表示の入力の値が送信されています。

311
powtac
<input type="checkbox" onclick="this.checked=!this.checked;">

しかし、あなたは絶対にそれが変更されていないことを確認するためにサーバー上のデータを検証しなければなりません。

62
Grant Wagner

別の「簡単な解決策」：

<!-- field that holds the data -->
<input type="hidden" name="my_name" value="1" /> 
<!-- visual dummy for the user -->
<input type="checkbox" name="my_name_visual_dummy" value="1" checked="checked" disabled="disabled" />

disabled = "無効"/disabled = true

56
summsel

これはユーザビリティの問題を少し提起します。

チェックボックスを表示したいが、それと対話しないようにしたいのであれば、なぜチェックボックスですらありませんか。

しかし、私のアプローチは無効を使用することです（ユーザーは無効にされたチェックボックスが編集不可能であることを期待します。提出しました。このようにしてあなたはあなたの価値を掲示します。

すなわちこのようなもの：

var form = document.getElementById('yourform');
form.onSubmit = function () 
{ 
    var formElems = document.getElementsByTagName('INPUT');
    for (var i = 0; i , formElems.length; i++)
    {  
       if (formElems[i].type == 'checkbox')
       { 
          formElems[i].disabled = false;
       }
    }
}
44
FlySwat
<input type="checkbox" readonly="readonly" name="..." />

jquery付き：

$(':checkbox[readonly]').click(function(){
            return false;
        });

それでも、コントロールが入力を受け付けないという視覚的なヒント（css、textなど）を与えることをお勧めします。

36
Jan

私は結果を達成するためにこれを使用しました：

<input type=checkbox onclick="return false;" onkeydown="return false;" />
20
Osama Javed

私はたまたま以下の解決策に気づいた。私は同じ問題について私の研究を見つけました。誰が投稿したのか私にはわからないが、私が作ったものではない。 jQueryを使います。

$(document).ready(function() {
    $(":checkbox").bind("click", false);
});

これにより、チェックボックスが読み取り専用になり、読み取り専用のデータをクライアントに表示するのに役立ちます。

12
Gotham's Reckoning
onclick="javascript: return false;"
8
Sandman
<input name="isActive" id="isActive" type="checkbox" value="1" checked="checked" onclick="return false"/>
6
pollodiablo

ここでの答えのいくつかは少し回り道のようですが、ここで小さなハックです。

<form id="aform" name="aform" method="POST">
    <input name="chkBox_1" type="checkbox" checked value="1" disabled="disabled" />
    <input id="submitBttn" type="button" value="Submit" onClick='return submitPage();'>
</form>​

それからjqueryであなたはどちらか2つのオプションのうちの1つを選ぶことができます：

$(document).ready(function(){
    //first option, you don't need the disabled attribute, this will prevent
    //the user from changing the checkbox values
    $("input[name^='chkBox_1']").click(function(e){
        e.preventDefault();
    });

    //second option, keep the disabled attribute, and disable it upon submit
    $("#submitBttn").click(function(){
        $("input[name^='chkBox_1']").attr("disabled",false);
        $("#aform").submit();
    });

});

</s></s></s></s></s></s></s></s>

デモ： http://jsfiddle.net/5WFYt/ /

5
sksallaj

<input type="checkbox" onclick="return false" />はあなたのために働くでしょう、私はこれを使っています

5
Rinto George

上記の答えを基にして、jQueryを使用する場合、これはすべての入力に対して良い解決策になるかもしれません。

<script>
    $(function () {
        $('.readonly input').attr('readonly', 'readonly');
        $('.readonly textarea').attr('readonly', 'readonly');
        $('.readonly input:checkbox').click(function(){return false;});
        $('.readonly input:checkbox').keydown(function () { return false; });
    });
</script>

私はAsp.Net MVCでこれを使っていくつかのフォーム要素を読み取り専用に設定しています。次のシナリオのように、親コンテナを.readonlyに設定することで、テキストおよびチェックボックスに対して上記の動作が行われます。

<div class="editor-field readonly">
    <input id="Date" name="Date" type="datetime" value="11/29/2012 4:01:06 PM" />
</div>
<fieldset class="flags-editor readonly">
     <input checked="checked" class="flags-editor" id="Flag1" name="Flags" type="checkbox" value="Flag1" />
</fieldset>
4
Derrick
<input type="radio" name="alwaysOn" onchange="this.checked=true" checked="checked">
<input type="radio" name="alwaysOff" onchange="this.checked=false" >
4
frag

私はConroyPの答えにコメントしたでしょうが、それには私が持っていない50の評判が必要です。別の回答を投稿するのに十分な評判があります。ごめんなさい。

ConroyPの答えの問題は、チェックボックスがページに含まれていなくても変更できないようになっていることです。 Electrons_Ahoyはそれほど規定していませんが、「無効」属性が適用される場合のように、変更不可能なチェックボックスが変更可能チェックボックスと同じではないにしても、同じように見える最良の答えがあります。 Electrons_Ahoyが「disabled」属性を使用したくないという2つの理由に対処するソリューションは、「disabled」属性を使用したため、notは必ずしも無効になります。 。

2つのブール変数、$ checkedと$ disabledを想定します。

if ($checked && $disabled)
    echo '<input type="hidden" name="my_name" value="1" />';
echo '<input type="checkbox" name="my_name" value="1" ',
    $checked ? 'checked="checked" ' : '',
    $disabled ? 'disabled="disabled" ' : '', '/>';

$ checkedがtrueの場合、チェックボックスはチェック済みとして表示されます。 $ checkedがfalseの場合、チェックボックスはチェックなしとして表示されます。ユーザーは、$ disabledがfalseの場合にのみ、チェックボックスの状態を変更できます。 「my_name」パラメーターは、ユーザーがチェックボックスをオフにした場合でも、ユーザーがチェックしない場合でもポストされません。 「my_name = 1」パラメーターは、ユーザーがチェックボックスをオンまたはオフにしたときに投稿されます。これがElectrons_Ahoyが探していたものだと思います。

3
David N. Jafferian

私は「無効」は受け入れられない答えではないことを知っています、なぜならopは投稿することを望んでいるからです。ただし、読み取り専用オプションが設定されている場合は、常にサーバー側のEVENで値を検証する必要があります。これは、悪意のあるユーザーがreadonly属性を使用して値を投稿するのを防ぐことができないためです。

元の値（サーバー側）を保存し、それを無効に設定することをお勧めします。その後、フォームを送信するときに、投稿された値を無視して、保存した元の値を使用します。

それは読み取り専用の値のように見え、振る舞います。そしてそれは悪意のあるユーザーからの投稿を処理（無視）します。あなたは1つの石で2羽の鳥を殺しています。

3
NL3294

以下のような単純な無効タグを使うだけです。

<input type="checkbox" name="email"  disabled>
2
Nirbhay Rana

それらをformでサーバに送信したいがユーザにとって対話的ではないようにしたい場合は、cssでpointer-events: noneを使用し（ IE10およびOpera 12を除くすべての最新ブラウザで ）、tab-indexを-1に設定できます。キーボードによる変更を防ぐため。また、labelタグをクリックすると状態が変化するため使用できません。

input[type="checkbox"][readonly] {
  pointer-events: none !important;
}

td {
  min-width: 5em;
  text-align: center;
}

td:last-child {
  text-align: left;
}
<table>
  <tr>
    <th>usual
    <th>readonly
    <th>disabled
  </tr><tr>
    <td><input type=checkbox />
    <td><input type=checkbox readonly tabindex=-1 />
    <td><input type=checkbox disabled />
    <td>works
  </tr><tr>
    <td><input type=checkbox checked />
    <td><input type=checkbox readonly checked tabindex=-1 />
    <td><input type=checkbox disabled checked />
    <td>also works
  </tr><tr>
    <td><label><input type=checkbox checked /></label>
    <td><label><input type=checkbox readonly checked tabindex=-1 /></label>
    <td><label><input type=checkbox disabled checked /></label>
    <td>broken - don't use label tag
  </tr>
</table>
2
Qwertiy

すべてのチェックボックスを「ロック」して、「読み取り専用」属性が存在する場合にユーザーが「チェック済み」状態を変更できないようにするには、jQueryを使用します。

$(':checkbox').click(function () {
    if (typeof ($(this).attr('readonly')) != "undefined") {
        return false;
    }
});

このコードの素晴らしいところは、すべてのチェックボックスを再バインドしなくても、コード全体にわたって「読み取り専用」属性を変更できることです。

ラジオボタンにも使えます。

2
Daniel Ribeiro

別のアイデアは、オーバーレイを使って readonly 入力を隠すことです。

http://pure-essence.net/2011/09/22/jquery-read-only-elements/ /

2
dodozhang21

遅れた答えだが、ほとんどの答えはそれを過度に複雑にしているようだ。

私が理解しているように、OPは基本的に望んでいました：

  1. ステータスを表示するための読み取り専用チェックボックス。
  2. 値はフォームとともに返されます。

注意すべきこと：

  1. OPはdisabled属性を使用しないことを望みました、なぜなら彼らは 'チェックされたチェックボックスをフォームの残りの部分と共に提出することを望んでいる'からです。
  2. チェックされていないチェックボックスはフォームとともに送信されません。上記の1.のOPからの引用は、それらが既に知っていることを示しています。基本的に、チェックボックスの値はチェックされている場合にのみ存在します。
  3. 無効のチェックボックスは、意図的に変更できないことを明確に示しているため、ユーザーが変更しようとすることはほとんどありません。
  4. チェックボックスの値は、yesやfalseなど、ステータスを示すことに限定されず、任意のテキストにすることができます。

したがって、readonly属性は機能しないので、JavaScriptを必要としない最善の解決策は次のとおりです。

  1. 無効なチェックボックス。名前も値もありません。
  2. チェックボックスをオンにして表示する場合は、サーバーに保存されている名前と値の隠しフィールド。

チェックボックスがチェックされているので：

<input type="checkbox" checked="checked" disabled="disabled" />
<input type="hidden" name="fieldname" value="fieldvalue" />

チェックされていないチェックボックスの場合：

<input type="checkbox" disabled="disabled" />

無効化された入力、特にチェックボックスの主な問題はコントラストが悪いことです。これは視覚障害のある人にとっては問題になるかもしれません。 Status: noneやStatus: implementedのような平易な言葉で値を示すのが良いかもしれませんが、後者が使われるときには上記の隠された入力を含みます。

<input type="hidden" name="status" value="implemented" />
1
Patanjali

いいえ、入力チェックボックスを読み取り専用にすることはできません。

しかし、あなたはそれらをJavaScriptで読み取り専用にすることができます！

ユーザーがいかなる方法でも変更できないようにすることで、このコードをいつでもどこでも追加して、チェックボックスが想定どおりに読み取り専用に機能するようにします。

jQuery(document).on('click', function(e){
      // check for type, avoid selecting the element for performance
      if(e.target.type == 'checkbox') {
          var el = jQuery(e.target);
          if(el.prop('readonly')) {
              // prevent it from changing state
              e.preventDefault();
          }
      }
});
input[type=checkbox][readonly] {
    cursor: not-allowed;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label><input type="checkbox" checked readonly> I'm readonly!</label>

このスクリプトは、jQueryのロード後いつでも追加できます。

動的に追加された要素に対して機能します。

ページ上の任意の要素上でclickイベント（changeイベントの前に発生します）を拾い上げることによって機能し、次にこの要素が読み取り専用チェックボックスであるかどうかをチェックし、そうであれば変更をブロックします。

ページのパフォーマンスに影響を与えないようにするための方法はたくさんあります。

1
Timo Huovinen

非常に遅い時期に貢献しています...とにかく。ページロード時に、jqueryを使用して、現在選択されているチェックボックス以外のすべてのチェックボックスを無効にします。次に、現在選択されているものを読み取り専用に設定して、無効になっているものと同じ外観になるようにします。ユーザーは値を変更できず、選択された値はまだ送信されます。

1
Jason

人々が読み取り専用のチェックボックスと（同様に）読み取り専用のラジオグループを好む主な理由は、変更できない情報が入力された形式でユーザーに提示できるようにするためです。

[OK]を無効にするとこれが実行されます。残念ながら、無効になっているコントロールはキーボードでナビゲートできないため、すべてのアクセシビリティ法に違反します。これは私が知っているHTMLでの最大のハングアップです。

1
Tim

HTMLチェックボックスをサーバーに送信するとき、それは 'on'または ''の文字列値を持ちます。

Readonlyはユーザーがチェックボックスを編集するのを止めません、そしてdisabledはポストバックされる値を止めます。
これを回避する1つの方法は、実際の値を格納するための隠し要素を用意することです。表示されたチェックボックスは無効になっているダミーです。このように、チェックボックスの状態は投稿間で維持されます。

これを行うための関数があります。それは 'T'または 'F'の文字列を使用し、あなたはこれを好きなように変えることができます。これは、サーバサイドASPスクリプトを使用してVBページで使用されています。

public function MakeDummyReadonlyCheckbox(i_strName, i_strChecked_TorF)

    dim strThisCheckedValue

    if (i_strChecked_TorF = "T") then
        strThisCheckedValue = " checked "
        i_strChecked_TorF = "on"
    else
        strThisCheckedValue = ""
        i_strChecked_TorF = ""
    end if

    MakeDummyReadonlyCheckbox = "<input type='hidden' id='" & i_strName & "' name='" & i_strName & "' " & _
        "value='" & i_strChecked_TorF & "'>" & _
    "<input type='checkbox' disabled id='" & i_strName & "Dummy' name='" & i_strName & "Dummy' " & _
        strThisCheckedValue & ">"   
end function

public function GetCheckbox(i_objCheckbox)

    select case trim(i_objCheckbox)

        case ""
            GetCheckbox = "F"

        case else
            GetCheckbox = "T"

    end select

end function

ASPページの上部で、保持されている値を取得できます。

strDataValue = GetCheckbox(Request.Form("chkTest"))

チェックボックスを出力したい場合は、これを実行できます。

response.write MakeDummyReadonlyCheckbox("chkTest", strDataValue)

私はこれをテストしました、そしてそれはちょうどうまく働きます。 JavaScriptにも依存しません。

0
Dave Barkshire

パーティーには遅刻しましたが、MVC（5）に対する答えを見つけました。チェックボックスを無効にし、チェックボックスの前にHiddenForを追加しました。これはうまくいきます。

 <div class="form-group">
     @Html.LabelFor(model => model.Carrier.Exists, new { @class = "control-label col-md-2" })
         <div class="col-md-10">
              @Html.HiddenFor(model => model.Carrier.Exists)
              @Html.CheckBoxFor(model => model.Carrier.Exists, new { @disabled = "disabled" })
              @Html.ValidationMessageFor(model => model.Carrier.Exists)
          </div>
 </div>
0
bowlturner

Readonly属性を使います

<input type="checkbox" readonly>

それからCSSを使用して対話を無効にします。

input[type='checkbox'][readonly]{
    pointer-events: none;
}

擬似クラス：read-onlyを使用しても、ここでは機能しません。

input[type='checkbox']:read-only{ /*not working*/
    pointer-events: none;
}
0
gordie

チェックボックスをフォームと一緒に送信する必要があるがユーザーに対して読み取り専用にする必要がある場合は、それらを無効に設定し、フォームの送信時にJavaScriptを使用して再度有効にすることをお勧めします。

これには2つの理由があります。まず最も重要なのは、ユーザーが変更可能なチェックボックスと読み取り専用のチェックボックスの違いが目に見えることです。無効にします。

2つ目の理由は、無効状態がブラウザに組み込まれているため、ユーザーが何かをクリックしたときに実行するコードが少なくて済むことです。これはおそらく他の何よりも個人的な好みです。フォームを送信するときにこれらを無効にするには、まだJavaScriptが必要です。

チェックボックスを無効にするためにフォームが送信されたときにJavaScriptを使用する方が、値を表示するために非表示の入力を使用するよりも簡単です。

0
Mnebuerquo

私の解決策は、実際にはFlySwatの解決策の反対ですが、それがあなたの状況でうまくいくかどうかはわかりません。チェックボックスのグループがあり、それぞれにフォームを送信するonClickハンドラがあります（それらはテーブルのフィルタ設定を変更するために使用されます）。最初のクリック以降のクリックは無視されるため、複数回のクリックは許可したくありません。だから私は最初のクリックの後、そしてフォームを送信した後にすべてのチェックボックスを無効にします。

onclick="document.forms['form1'].submit(); $('#filters input').each(function() {this.disabled = true});"

チェックボックスは、 "filters"というIDを持つspan要素内にあります。コードの2番目の部分は、チェックボックスを繰り返し処理してそれぞれを無効にするjQueryステートメントです。このように、チェックボックスの値はフォームを介して送信され（無効にする前にフォームが送信されているため）、ページがリロードされるまでユーザーがそれらを変更することを防ぎます。

0
sk.

クライアントが特定の状況下でそれらを変更できるようにしたくないだけです。

READONLY自体は機能しません。あなたはCSSでファンキーなことができるかもしれませんが、通常は無効にします。

警告：それらがポストバックされた場合、クライアントはそれらを変更することができます、期間。ユーザーが何かを変更するのを防ぐためにreadonlyに頼ることはできません。常にフィドラーを使用するか、単にhtml w/firebugなどを使用することができます。

0
Walden Leverich

フォームを送信するときに、実際には状態ではなくチェックボックスの値を渡します（checked/uncheck）。 Readonly属性は値を編集することを妨げますが、状態は編集できません。送信したい値を表す読み取り専用フィールドが必要な場合は、読み取り専用テキストを使用してください。

0
dpp

他の誰かがMVCとエディタテンプレートを使用している場合、これが私が読み取り専用プロパティの表示を制御する方法です（私はifステートメントの値を取得するためにカスタム属性を使用します）

@if (true)
{
    @Html.HiddenFor(m => m)
    @(ViewData.Model ? Html.Raw("Yes") : Html.Raw("No"))
} 
else
{               
    @Html.CheckBoxFor(m => m)
}
0
Richard Maxwell
<input name="testName" type="checkbox" disabled>
0
Md. Rahman