909

可能性があると思いましたが、（いわば）口の中にお金を入れていないので、読み取り専用属性を設定しても実際には何も起こらないようです。

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

4

47 に答える 47

638

これを使用できます：

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

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

于 2011-08-01T22:05:23.273 に答える
447

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

faqs.orgから：

READONLYは、ユーザーがフィールドの値を変更するのを防ぐだけであり、フィールドを操作するのを防ぐだけであることを理解することが重要です。たとえば、チェックボックスでは、チェックボックスをオンまたはオフにすることができます（したがって、CHECKED状態を設定します）が、フィールドの値は変更しません。

使用したくない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';
}
于 2008-09-30T22:02:57.503 に答える
380

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

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

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

于 2008-09-30T22:09:45.570 に答える
72 
<input type="checkbox" onclick="this.checked=!this.checked;">

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

于 2008-09-30T22:18:21.930 に答える
57

別の「簡単な解決策」：

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

無効="無効" / 無効 = true

于 2012-10-19T09:13:51.000 に答える
45

これは、ユーザビリティに少し問題があります。

チェックボックスを表示したいが、それを操作させたくない場合、なぜチェックボックスでさえあるのでしょうか?

ただし、私のアプローチは無効を使用することです (ユーザーは、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;
       }
    }
}
于 2008-09-30T22:14:06.713 に答える
40 
<input type="checkbox" readonly="readonly" name="..." />

jquery を使用:

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

コントロールが入力を受け入れないという視覚的なヒント (css、テキストなど) を提供することをお勧めします。

于 2010-06-12T04:19:26.540 に答える
25

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

<input type=checkbox onclick="return false;" onkeydown="return false;" />
于 2012-05-31T10:51:46.243 に答える
13

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

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

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

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

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

できます。

于 2019-09-13T01:37:28.643 に答える
9 
onclick="javascript: return false;"
于 2010-07-20T17:43:45.790 に答える
7 
<input name="isActive" id="isActive" type="checkbox" value="1" checked="checked" onclick="return false"/>
于 2009-08-13T16:41:21.783 に答える
6

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

于 2012-04-26T06:01:29.580 に答える
4 
<input type="radio" name="alwaysOn" onchange="this.checked=true" checked="checked">
<input type="radio" name="alwaysOff" onchange="this.checked=false" >
于 2013-07-22T20:33:06.770 に答える
4

ここでの答えのいくつかは少し回りくどいように見えますが、ここにちょっとした裏技があります。

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

});

</p>

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

于 2012-07-26T21:55:14.083 に答える
4

上記の回答に基づいて、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>
于 2012-11-30T17:22:01.507 に答える
4

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

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

読み取り専用の値のように見え、動作します。また、悪意のあるユーザーからの投稿を処理 (無視) します。一石二鳥ですね。

于 2015-03-04T00:44:58.020 に答える
4

readonlyでは動作しません<input type='checkbox'>

したがって、フォームで無効になっているチェックボックスから値を送信する必要がある場合は、jQuery を使用できます。

$('form').submit(function(e) {
    $('input[type="checkbox"]:disabled').each(function(e) {
        $(this).removeAttr('disabled');
    })
});

このようにして、フォームを送信するときに無効な属性が要素から削除されます。

于 2021-03-24T14:57:13.667 に答える
3

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

于 2014-12-05T20:36:51.000 に答える
1

パーティーに非常に遅れましたが、MVC (5) の回答を見つけました。CheckBox を無効にし、チェックボックスの前に HiddenFor を追加したため、投稿時に Hidden フィールドを最初に見つけてその値を使用します。これは機能します。

 <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>
于 2014-09-24T14:34:31.577 に答える
0

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

于 2011-03-25T20:16:34.177 に答える
0

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

READONLY 自体は機能しません。CSS を使用してファンキーなことを行うこともできますが、通常はそれらを無効にするだけです。

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

于 2008-09-30T22:06:14.750 に答える
0

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

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

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

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

于 2009-09-26T06:05:12.497 に答える
0

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

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

于 2010-11-08T17:47:22.913 に答える
0

あるいは単に：

$('your selector').click(function(evt){evt.preventDefault()});
于 2013-05-22T13:39:15.277 に答える
-1

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

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

チェックボックスは、ID が「filters」の span 要素にあります。コードの 2 番目の部分は、チェックボックスを繰り返し処理し、それぞれを無効にする jQuery ステートメントです。このように、チェックボックスの値は引き続きフォーム経由で送信され (無効にする前にフォームが送信されたため)、ページがリロードされるまでユーザーが値を変更できないようにします。

于 2010-05-05T17:30:24.013 に答える
-1

フォームを送信するとき、実際には状態 (チェック済み/チェックなし) ではなく、チェックボックスの値を渡します。readonly 属性により、値は編集できますが、状態は編集できません。送信する値を表す読み取り専用フィールドが必要な場合は、読み取り専用テキストを使用します。

于 2011-11-16T04:11:25.173 に答える
-1

HTML チェックボックスをサーバーに送信する場合、「on」または「」の文字列値が含まれます。

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

これを行う関数を次に示します。'T' または 'F' の文字列を使用し、これを好きなように変更できます。これは、サーバー側の VB スクリプトを使用する ASP ページで使用されています。

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 にも依存しません。

于 2009-04-09T13:28:39.520 に答える
-1 
<input name="testName" type="checkbox" disabled>
于 2014-05-27T08:55:58.800 に答える
-1

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

@if (true)
{
    @Html.HiddenFor(m => m)
    @(ViewData.Model ? Html.Raw("Yes") : Html.Raw("No"))
} 
else
{               
    @Html.CheckBoxFor(m => m)
}
于 2013-01-29T17:39:16.993 に答える
-3

古いHTMLでは、使用できます

<input type="checkbox" disabled checked>text

しかし、実際には単純に古い HTML を使用することはお勧めできません。現在は XHTML を使用する必要があります。

整形式のXHTMLでは、使用する必要があります

<input type="checkbox" disabled="disabled" checked="checked" />text <!-- if yu have a checked box-->
<input type="checkbox" disabled="disabled" />text <!-- if you have a unchecked box -->

整形式の XHTML には XML フォームが必要です。これが、単に disabled を使用するのではなく、disabled="disabled" を使用する理由です。

于 2011-07-01T15:37:57.310 に答える
-3

最も単純な（私の見解では）：

onclick="javascript:{this.checked = this.defaultChecked;}"
于 2010-11-01T14:37:24.680 に答える
-3

チェックボックスが常にチェックされていることがわかっている場合、次のように動作します。

<input type="checkbox" name="Name" checked onchange='this.checked = true;'>
于 2012-04-30T00:46:50.940 に答える
-4

チェックボックスのような小さな画像をいつでも使用できます。

于 2008-09-30T22:17:59.950 に答える
-4

これを試して、チェックボックスを読み取り専用にし、ユーザーがチェックできないようにします。これにより、チェックボックスの値を POST できます。そのためには、チェックボックスのデフォルト状態をチェック済みとして選択する必要があります。

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

上記の機能が必要で、チェックボックスのデータを受け取りたくない場合は、以下を試してください。

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

それが役立つことを願っています。

于 2012-02-07T07:46:08.527 に答える
-4

ここで誰も考えていないのは、JavaScript を使用しているということです。これは、どのユーザーでも非常に簡単に回避できます。

単純に無効にすると、すべての JQuery/Return False ステートメントが無効になります。

読み取り専用チェックボックスの唯一のオプションはサーバー側です。

それらを表示し、それらを変更させますが、それらからの新しい投稿データは受け入れません。

于 2012-07-08T17:41:30.940 に答える
-4

入力を空白の div でカバーしてみませんか。

<div id='checkbox_wrap'>
   <div class='click_block'></div>
   <input type='checkbox' /> 
</div>

次に、CSSでこのようなもの

 #checkbox_wrap{
   height:10px;
   width:10px;
   }
 .click_block{
   height: 10px;
   width: 10px;
   position: absolute;
   z-index: 100;
}
于 2014-07-15T05:24:23.027 に答える
-5

いいえ。ただし、JavaScriptイベントを使用して同様のことを実現できる可能性があります

于 2008-09-30T22:04:18.890 に答える