無効になっている入力チェックボックスをPOST /送信する方法

特定の条件で無効にする必要があるチェックボックスがあります。HTTPが無効な入力をポストしないことが判明しました。

どうすればそれを回避できますか？無効になっている場合でも入力を送信し、入力を無効のままにしますか？

更新：READONLYチェックボックスでは機能しません

使用できますdisabled="disabled"が、この時点でチェックボックスの値は値に表示されませんPOST。戦略の1つは、同じフォーム内にチェックボックスの値を保持する非表示フィールドを追加し、そのフィールドから値を読み取ることです

単純に変更disabledしますreadonly

私はその問題を解決しました。

readonly="readonly"タグが機能しないため（別のブラウザーを試しました）、disabled="disabled" 代わりに使用する必要があります。しかし、あなたのチェックボックスの値は投稿しません...

これが私の解決策です：

取得するには、「読み取り専用」の外観とPOSTの同じ時間に、チェックボックスの値を、ちょうどあなたのチェックボックスと同じ名前と値を持つ隠された「入力」を追加します。チェックボックスの横または同じ<form></form>タグの間に置く必要があります。

<input type="checkbox" checked="checked" disabled="disabled" name="Tests" value="4">SOME TEXT</input>

<input type="hidden" id="Tests" name="Tests" value="4" />

また、あなたに知らせるために、readonly="readonly", readonly="true", readonly="",またはREADONLYこれを解決しないだけです！私はそれを理解するために数時間を費やしました！

この参照も関連していません（まだ関係がないか、もう関係ないかもしれませんが、私にはわかりません）：http : //www.w3schools.com/tags/att_input_readonly.asp

JQueryを使用して問題がなければ、フォームを送信するときにdisabled属性を削除します。

$("form").submit(function() {
    $("input").removeAttr("disabled");
});

このように処理できます...各チェックボックスで、同じname属性を持つ非表示フィールドを作成します。ただし、その非表示フィールドの値を、テストできるいくつかのデフォルト値に設定します。例えば..

<input type="checkbox" name="myCheckbox" value="agree" />
<input type="hidden" name="myCheckbox" value="false" />

フォームの送信時にチェックボックスが「オン」の場合、そのフォームパラメータの値は

"agree,false"

チェックボックスがオフの場合、値は

"false"

「false」の代わりに任意の値を使用することができますが、アイデアはわかります。

<input type="checkbox" checked="checked" onclick="this.checked=true" />

「無効になっている入力チェックボックスをPOST /送信する方法」という問題から始めました。私の回答では、コメントをスキップしました。「チェックボックスを無効にしたい場合は、必ず接頭辞付きの値（チェック済みまたはチェックなし）を保持する必要があります。また、ユーザーがそれを認識できるようにします（そうでない場合は、非表示のタイプを使用して、チェックボックスではありません）」。私の答えでは、チェックボックスを常にチェックしたままにしたいと思っていて、そのコードはこのように機能します。そのチェックボックスをクリックすると、永久にチェックされ、その値はPOSTED / Submittedになります！同じように、checked = "checked"なしでonclick = "this.checked = false"と書いた場合（注：デフォルトはオフ）、永久にオフになり、その値はPOSTED / Submitted！にはなりません。

たとえば、CSSクラスを作成します。

.disable{
        pointer-events: none;
        opacity: 0.5;
}

無効な属性の代わりにこのクラスを適用する

これを行う最も簡単な方法は次のとおりです。

<input type="checkbox" class="special" onclick="event.preventDefault();" checked />

これにより、ユーザーはこのチェックボックスの選択を解除できなくなり、フォームが送信されたときに値が送信されます。ユーザーがこのチェックボックスを選択できないようにする場合は、チェックを外します。

また、JavaScriptを使用して、特定の条件が満たされたときにonclickをクリアすることもできます（それが目的の場合）。ここに私が何を意味するかを示す汚い汚いフィドルがあります。完璧ではありませんが、要点はわかります。

http://jsfiddle.net/vwUUc/

これは魅力のように機能します：

1. 「無効」属性を削除します
2. フォームを送信する
3. 属性を再度追加します。これを行うための最良の方法は、たとえば1ミリ秒の遅延のあるsetTimeOut関数を使用することです。

唯一の欠点は、送信時に無効な入力フィールドが短時間点滅することです。少なくとも私のシナリオでは、それほど問題ではありません！

$('form').bind('submit', function () {
  var $inputs = $(this).find(':input'),
      disabledInputs = [],
      $curInput;

  // remove attributes
  for (var i = 0; i < $inputs.length; i++) {
    $curInput = $($inputs[i]);

    if ($curInput.attr('disabled') !== undefined) {
      $curInput.removeAttr('disabled');
      disabledInputs.push(true);
    } else 
      disabledInputs.push(false);
  }

  // add attributes
  setTimeout(function() {
    for (var i = 0; i < $inputs.length; i++) {

      if (disabledInputs[i] === true)
        $($inputs[i]).attr('disabled', true);

    }
  }, 1);

});

無効にしないでください。代わりに、それをreadonlyに設定しますが、これは、ユーザーが状態を変更できないようにすることによる影響はありません。ただし、jQueryを使用してこれを強制できます（ユーザーがチェックボックスの状態を変更できないようにします：

$('input[type="checkbox"][readonly="readonly"]').click(function(e){
    e.preventDefault();
});

これは、変更したくないすべてのチェックボックスに「読み取り専用」属性があることを前提としています。例えば。

<input type="checkbox" readonly="readonly">

以降：

• readonly属性をチェックボックスに設定することは、HTML仕様に従って有効ではありません。
• 隠し要素を使用して値を送信することは非常にきれいな方法ではありません
• 値の変更を防止するonclick JavaScriptの設定もあまり良くありません

私はあなたに別の可能性を提供します：

チェックボックスを通常どおり無効に設定します。そして、フォームがユーザーによって送信される前に、JavaScriptによってこのチェックボックスを有効にします。

<script>
    function beforeSumbit() {
        var checkbox = document.getElementById('disabledCheckbox');
        checkbox.disabled = false;
    }
</script>
...
<form action="myAction.do" method="post" onSubmit="javascript: beforeSubmit();">
    <checkbox name="checkboxName" value="checkboxValue" disabled="disabled" id="disabledCheckbox" />
    <input type="submit />
</form>

フォームが送信される前にチェックボックスが有効になるため、その値は一般的な方法で投稿されます。このソリューションについてあまり面白くないのは、このチェックボックスがしばらくの間有効になり、ユーザーが表示できることだけです。しかし、それは私が共存できる細部にすぎません。

残念ながら、「簡単な」解決策はありません。readonly属性はチェックボックスには適用できません。私はチェックボックスに関するW3仕様を読み、犯人を見つけました：

フォームの送信時にコントロールに現在の値がない場合、ユーザーエージェントはそれを成功したコントロールとして扱う必要はありません。（http://www.w3.org/TR/html401/interact/forms.html#h-17.13.2）

これにより、チェックされていない状態と無効な状態が同じ解析値になります。

• readonly = "readonly"はチェックボックスの有効な属性ではありません。
• onclick = "event.preventDefault（）;" チェックボックス自体でトリガーされるため、常に良い解決策とは限りません。しかし、それはいくつかの場面で魅力を働かせることができます。
• チェックボックスonSubmitを有効にすることは解決策ではありません。コントロールはまだ成功したコントロールとして扱われていないため、値は解析されません。
• 同じ名前を持つ別の非表示の入力をHTMLに追加しても機能しません。最初のコントロールの値は、2番目のコントロールの値と同じ名前であるため、2番目のコントロールの値によって上書きされるためです。

これを行う唯一の完全な方法は、フォームの送信時にJavaScriptで同じ名前の非表示の入力を追加することです。

これのために作成した小さなスニペットを使用できます。

function disabled_checkbox() {
  var theform = document.forms[0];
  var theinputs = theform.getElementsByTagName('input');
  var nrofinputs = theinputs.length;
  for(var inputnr=0;inputnr<nrofinputs;inputnr++) {
    if(theinputs[inputnr].disabled==true) {
      var thevalueis = theinputs[inputnr].checked==true?"on":"";
      var thehiddeninput = document.createElement("input");
      thehiddeninput.setAttribute("type","hidden");
      thehiddeninput.setAttribute("name",theinputs[inputnr].name);
      thehiddeninput.setAttribute("value",thevalueis);
      theinputs[inputnr].parentNode.appendChild(thehiddeninput);
    }
  }
}

これにより、ドキュメントの最初のフォームが検索され、すべての入力が収集され、無効な入力が検索されます。無効な入力が見つかった場合、非表示の入力が同じ名前と値 'on'（状態が 'checked'の場合）および ''（状態が ''-チェックされていない場合）でparentNodeに作成されます。

この関数は、次のようにFORM要素の「onsubmit」イベントによってトリガーされます。

<form id='ID' action='ACTION' onsubmit='disabled_checkbox();'>

onsubmit="this['*nameofyourcheckbox*'].disabled=false"フォームに追加します。

hiddenフィールド以外のオプションはないのでhidden、以下のコードで示されているようなフィールドを使用してみてください。

<input type="hidden" type="text" name="chk1[]" id="tasks" value="xyz" >
<input class="display_checkbox" type="checkbox" name="chk1[]" id="tasks" value="xyz" checked="check"  disabled="disabled" >Tasks

<html>
    <head>
    <script type="text/javascript">
    function some_name() {if (document.getElementById('first').checked)      document.getElementById('second').checked=false; else document.getElementById('second').checked=true;} 
    </script>
    </head>
    <body onload="some_name();">
    <form>
    <input type="checkbox" id="first" value="first" onclick="some_name();"/>first<br/>
    <input type="checkbox" id="second" value="second" onclick="some_name();" />second
    </form>
    </body>
</html>

関数some_nameは前の句の例であり、句に従ってチェックされている（その値をポストする）またはオフになっている（値をポストしない）2番目のチェックボックスを管理し、ユーザーはそのステータスを変更できません。2番目のチェックボックスの無効化を管理する必要はありません

必要に応じて無効にしたまま、フォームを送信する前に無効属性を削除できます。

$('#myForm').submit(function() {
    $('checkbox').removeAttr('disabled');
});

追加onclick="this.checked=true"私の問題を解決する：
例：

<input type="checkbox" id="scales" name="feature[]" value="scales" checked="checked" onclick="this.checked=true" />

これは、バックエンドから制御できる別の回避策です。

ASPX

<asp:CheckBox ID="Parts_Return_Yes" runat="server" AutoPostBack="false" />

ASPX.CS

Parts_Return_Yes.InputAttributes["disabled"] = "disabled";
Parts_Return_Yes.InputAttributes["class"] = "disabled-checkbox";

クラスはスタイルの目的でのみ追加されます。

私はここの答えにHTML、JS、CSSの提案を組み合わせました

HTML：

<input type="checkbox" readonly>

jQuery：

(function(){
    // Raj: https://stackoverflow.com/a/14753503/260665
    $(document).on('click', 'input[type="checkbox"][readonly]', function(e){
        e.preventDefault();
    });
})();

CSS：

input[type="checkbox"][readonly] {
  cursor: not-allowed;
  opacity: 0.5;
}

要素は「無効化」されていないため、POSTを通過します。