仅当选中所有复选框时按钮才处于活动状态

Question

如何创建这样的东西：

如果用户单击了两个复选框，则按钮(保存“name=”)处于活动状态，否则该按钮处于非活动状态

<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

这就是它的实际作用：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 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/

Answer 3

将按钮设置为默认禁用(通过向按钮添加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。