0

このようなものを作成する方法：

ユーザーが2つのチェックボックスをクリックした場合、ボタン（name = "save"）がアクティブになります。それ以外の場合、このボタンはアクティブではありません。

<label>
<input id="accepted1" type="checkbox" />Please accept
</label>
<label>
<input id="accepted2" type="checkbox" /> Please accept2
</label>


<button class="btn" data-toggle="modal" data-target="#warning" data-dismiss="modal" aria-hidden="true">Cancel</button>
<button class="btn btn-primary" type="submit" id="id_complete" name="save">Complete Order</button>

何も思いつきません

4

8 に答える 8

2

最初は (CSS を使用して) ボタンを表示しないように設定する必要があります。次に、各入力が変更されるたびに、両方の入力が現在チェックされているかどうかを確認し、両方の入力がチェックされている場合は、ボタンを表示するように設定します。

$('input').on('change', function() {
    if($('#accepted1').is(':checked') && $('#accepted2').is(':checked'))
        // show the button
    } else {
        // hide the button
    }
});

例: http://jsfiddle.net/vw6N4/1/

于 2013-01-15T14:58:15.417 に答える
1

次のようなものを試してください：

if ( $('checkbox:checked').length == $('checkbox').length )
  $('button[name="save"]').removeAttr('disabled');
else
  $('button[name="save"]').attr('disabled', 'disabled');

必要なすべてのチェックボックスに特定のクラスを追加してチェックしない方$('checkbox:checked').length == $('checkbox').lengthが良いですが、$('checkbox.required:checked').length == $('checkbox.required').length

于 2013-01-15T14:59:14.793 に答える
1

ここで動作しています：http://jsfiddle.net/Codesleuth/swqmX/1/

$('#accepted1,#accepted2').click(function () {
  if ($('#accepted1:checked,#accepted2:checked').length == 2)
    $('#id_complete').removeAttr('disabled');
  else
    $('#id_complete').attr('disabled','disabled');
});

そして、デフォルトでボタンを無効にすることを忘れないでください:

<button class="btn btn-primary" type="submit" id="id_complete" name="save" disabled="disabled">Complete Order</button>
于 2013-01-15T14:59:16.157 に答える
1

disabled="disabled"デフォルトで無効になるようにボタンを設定します (ボタンに HTML 属性を追加します)。次にis(":checked")、jQuery が提供する次のようなチェックを使用します。

$("input[id^=\"accepted\"]").change(function() {
    if($("#accepted1").is(":checked") && $("#accepted2").is(":checked")) {
        $("#id_complete").removeAttr("disabled");
    } else {
        $("#id_complete").attr("disabled", "disabled");
    }
});

このライブJSFiddle の例も参照してください。

于 2013-01-15T14:57:43.280 に答える
1

ボタンが最初に無効になっていることを確認するためだけに

$("#id_complete").attr("disabled", "disabled");   



 $('input).on('change', function() {
      var c1 = $('#accepted1').is(":checked");
      var c2 = $('#accepted2').is(":checked");

    if(c1 && c2){
       $("#id_complete").removeAttr("disabled");
    }
    else{
       $("#id_complete").attr("disabled", "disabled");

    }
    }
于 2013-01-15T14:58:50.083 に答える
0 
function checkSave() {
   if ($("input[id^=accepted]:checked").length == $("input[id^=accepted]").length) {
      $("#id_complete").prop('disabled', false);
   }
   else {
      $("#id_complete").prop('disabled', true);
   }
}
checkSave();
$("input[id^=accepted]").change(checkSave);

これにより、ページの読み込みも処理されます。

于 2013-01-15T14:59:31.567 に答える
0

各チェックボックスにクラスチェックを追加すると、このように両方がチェックされているかどうかを簡単に確認できます。また、無効な属性を HTML の完了ボタンに追加します。

$(".check").click(function () {
  if ($(".check:checked").length == 2) 
    $("#id_complete").removeAttr("disabled");
  else 
    $("#id_complete").attr("disabled", "");
});

サンプル フィドル: http://jsfiddle.net/c578C/1/

于 2013-01-15T15:02:41.507 に答える
0

ほとんどの答えは少し長ったらしいですが、これを達成するためのもっと簡単な方法があります。

最初に、チェックする必要があるすべての要素に のクラスを指定しcheck-required、次に単にlengthまたはcheck-requiredの長さとを比較して、 のプロパティcheck-required:checkedを設定します。たとえば、次のようになります。disabledbutton

$('.check-required').change(function() {
  $('#id_complete').prop('disabled', $('.check-required').length !== $('.check-required:checked').length);
}).change();

change上記のように、ページの読み込み時にもイベントをトリガーする必要があります。

他の回答に対するこれの主な利点は、チェックボックスを追加する必要がある場合、それらにクラスを与える限りcheck-required、コードが引き続き希望どおりに機能することです。

ここにフィドルがあります

于 2013-01-15T15:04:36.687 に答える