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，然后简单地将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类，代码将继续按需要工作。

这是一个小提琴

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