HTML

Question

我希望在选中一个或所有复选框时，不会禁用提交按钮。但是，如果未选中复选框，则禁用提交。

我写了这段代码：

$('input[type="submit"]').prop('disabled', true).addClass('disabled');

	$('input[type="checkbox"]').click(function(){
	    if (this.checked) {
	        $('input[type="submit"]').prop('disabled', false).removeClass('disabled');
	    } else {
	    	$('input[type="submit"]').prop('disabled', true).addClass('disabled');
	    }
	});

.disabled {
  background-color: #ececec !important;
  border: none;
}

input[type="submit"] {
  background-color: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">

<input type="submit" value="Send">

它几乎正常工作，但是当我取消选中一个复选框时，提交按钮已被禁用，但我的其他复选框仍然被选中。

感谢您的帮助

Answer 1

我希望在选中一个或所有复选框时，不会禁用提交按钮。但是，如果未选中复选框，则禁用提交。

使用:checked selector选中已选中的复选框，然后确定返回的jQuery对象的长度是否为零。
不要在复选框元素上听click，而是收听change事件。
您可以使用:checkbox选择器代替input[type="checkbox"]。
您还需要使用下面的.addClass()方法替换.toggleClass()方法。

＆＃13;

$('input[type="submit"]').prop('disabled', true).addClass('disabled');

$(':checkbox').on('click', function() {
  var atLeastOneChecked = $(':checkbox:checked').length === 0;
  $('input[type="submit"]').prop('disabled', atLeastOneChecked).toggleClass('disabled', atLeastOneChecked);
});

＆＃13;

.disabled { background-color: #ececec; border: none; }
input[type="submit"] { background-color: green; }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">

<input type="submit" value="Send">

＆＃13;

作为旁注，您需要向元素添加一些类，以便不会选择DOM中的所有复选框。

Answer 2

$('input[type="submit"]').prop('disabled', true).addClass('disabled');

$('input[type="checkbox"]').click(function(){
    if ($('input[type="checkbox"]:checked').length > 0){
        $('input[type="submit"]').prop('disabled', false).removeClass('disabled');
    }else {
        $('input[type="submit"]').prop('disabled', true).addClass('disabled');
    }
});

Answer 3

您应该创建一个单独的函数，在单击复选框时调用该函数，如下所示：

function toggleSubmit() {
    var boxes = $(':checked');
    var button = $('input[type=submit]');
    if (boxes.length) {
        button.removeAttr('disabled').removeClass('disabled');
    } else {
        button.attr('disabled', 'disabled').addClass('disabled');
    }
}

$(document).on('change', ':checkbox', toggleSubmit);

Answer 4

所以你可以在一行中完成所有这些，我只是将bool作为一个变量。我最初也在html中设置了禁用的属性。

HTML

<input type="submit" disabled class="disabled"/>

的jQuery

$('input[type="checkbox"]').on('change', function(){
    var bool = $('input[type="checkbox"]:checked').length > 0;
    $('input[type="submit"]').prop('disabled',!bool).toggleClass('disabled', !bool);
});

如果选中复选框，请更改提交输入

4 个答案:

HTML

的jQuery