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

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

チェックボックスをフォームの残りの部分と共に送信したいので、クライアントが特定の状況でそれらを変更できるようにしたくないので、私は無効を使用したくありません。

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

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

これが機能するのは、クリックイベントからfalseを返すと、実行のチェーンの継続が停止するためです。

READONLYフィールドの値を編集できないため、チェックボックスでは機能しませんが、チェックボックスを使用すると、実際にフィールドの状態を編集しています（オン||オフ）

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';
}

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

<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"/>

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

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

ただし、サーバー上のデータを検証して、データが変更されていないことを確認する必要があります。

別の「簡単な解決策」：

<!-- 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

これにより、ユーザビリティの問題が少し発生します。

チェックボックスを表示したいが、それを操作させたくない場合は、なぜチェックボックスを使用するのですか？

ただし、私のアプローチは無効化を使用することです（ユーザーは、JSを使用して有効化されたチェックボックスが機能しないようにするのではなく、無効化されたチェックボックスが編集不可能であることを期待します）、フォームが表示される直前にチェックボックスを有効にするJavaScriptを使用してフォーム送信ハンドラーを追加します提出しました。このようにして、あなたは自分の価値を投稿します。

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

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;
       }
    }
}

<input type="checkbox" readonly="readonly" name="..." />

jqueryで：

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

コントロールが入力を受け入れないことを視覚的に示すヒント（css、text、...）を与えることは、それでも良い考えかもしれません。

私はこれを使用して結果を達成しました：

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

以下の解決策にたまたま気づきました。でそれは同じ問題のための私の研究を見つけました。誰が投稿したかはわかりませんが、私が作成したものではありません。jQueryを使用します。

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

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

onclick="javascript: return false;"

遅ればせながら、ほとんどの回答は複雑すぎるようです。

私が理解しているように、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、後者の場合は、次のように、上記の非表示の入力を含めます。

<p>Status: Implemented<input type="hidden" name="status" value="implemented" /></p>

現在の回答のほとんどには、次の1つ以上の問題があります。

1. キーボードではなくマウスのみを確認してください。
2. ページの読み込み時のみチェックします。
3. いつも人気のある変更をフックするか、他の何かがフックした場合に常に機能するとは限らないイベントを送信します。
4. JavaScriptを使用してチェックボックスを再度有効にするために、元に戻す必要がある非表示の入力またはその他の特別な要素/属性が必要です。

以下は簡単で、これらの問題はありません。

$('input[type="checkbox"]').on('click keyup keypress keydown', function (event) {
    if($(this).is('[readonly]')) { return false; }
});

チェックボックスが読み取り専用の場合、変更されません。そうでない場合は、そうなります。それはjqueryを使用しますが、おそらくすでに使用しています...

できます。

<input name="isActive" id="isActive" type="checkbox" value="1" checked="checked" onclick="return false"/>

それらがフォームでサーバーに送信されるようにしたいがユーザーに対して対話型ではない場合はpointer-events: none、cssで使用し（IE10-およびOpera 12-を除くすべての最新ブラウザーで動作）、-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>

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

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

<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つのオプションのいずれかを選択できます。

$(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();
    });

});

​

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

上記の回答に基づいて、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>

<input type="radio" name="alwaysOn" onchange="this.checked=true" checked="checked">
<input type="radio" name="alwaysOff" onchange="this.checked=false" >

オペアンプが投稿することを望んでいるので、「無効」は許容できる回答ではないことを知っています。ただし、読み取り専用オプションを設定している場合は、常にサーバー側でも値を検証する必要があります。これは、悪意のあるユーザーがreadonly属性を使用して値を投稿するのを阻止できないためです。

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

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

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

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

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

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が探していたものだと思います。

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

しかし、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がロードされた後であればいつでも追加できます。

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

これは、ページ上の任意の要素で（変更イベントの前に発生する）クリックイベントを取得することで機能し、この要素が読み取り専用チェックボックスであるかどうかをチェックし、そうである場合、変更をブロックします。

ページのパフォーマンスに影響を及ぼさないようにするために、非常に多くのifがあります。

以下のような単純な無効化タグを使用してください。

<input type="checkbox" name="email"  disabled>

別のアイデアは、オーバーレイを使用して、読み取り専用を隠すことです入力

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

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

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

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

ラジオボタンにも使用できます。

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

OKを無効にするとこれが行われます-残念ながら無効になっているコントロールはキーボードで操作できません。これは私が知っているHTMLで最大のハングアップです。

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

パーティーに非常に遅れましたが、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>

私は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;
}

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

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

警告：それらがポストされた場合、クライアントはそれらを変更できます。ユーザーが何かを変更するのを防ぐために、読み取り専用に依存することはできません。は常にフィドラーを使用したり、FirebugなどのHTMLを変更したりできます。

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

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

チェックボックスは、IDが「filters」のspan要素内にあります。コードの2番目の部分は、チェックボックスを反復処理して各チェックボックスを無効にするjQueryステートメントです。この方法では、チェックボックスの値は引き続きフォームを介して送信され（フォームを無効にする前に送信されたため）、ページが再ロードされるまでユーザーは値を変更できません。