Question

如何创建这样的东西：

如果用户单击了两个复选框，则按钮（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>

我不知道

Answer 1

您可能希望首先将按钮设置为不显示（使用CSS）。然后，当每个输入都改变时，检查当前是否检查了两个输入，如果是，则设置按钮显示。

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

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

Answer 2

默认情况下将按钮设置为禁用（通过向按钮添加disabled="disabled" HTML属性）。然后使用jQuery提供的is(":checked")检查，例如：

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

另请参阅此实时JSFiddle example。

Answer 3

只是为了确保按钮最初被禁用

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

    }
    }

Answer 4

尝试类似：

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

Answer 5

这里有效：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>

Answer 6

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

这也处理页面加载。

Answer 7

我会在每个复选框中添加类检查，然后您可以简单地检查是否都检查了这两个复选框。另外，我会在HTML中的完整按钮中添加一个禁用的属性。

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

示例小提琴：http://jsfiddle.net/c578C/1/

Answer 8

大多数答案似乎有点啰嗦，实现这一目标的方法要简单得多。

首先，将您需要检查的所有元素都设为check-required类，然后只需将length或check-required与check-required:checked的长度进行比较即可设置disabled上的button属性，例如：

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

您还应该在页面加载时触发change事件，如上所示。

这比其他答案的主要好处是，如果您需要添加更多复选框，只要您给它们check-required类，代码就会继续按照需要运行。

Here's a fiddle

仅在选中所有复选框时激活按钮

8 个答案: