0

如何创建这样的东西:

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

将按钮设置为默认禁用(通过向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 回答
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 回答
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 中的完整按钮中添加一个 disabled 属性。

$(".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,然后简单地将lengthcheck-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类,代码将继续按需要工作。

这是一个小提琴

于 2013-01-15T15:04:36.687 回答