如何使用名称选择器选择选定复选框的长度

Question

我有一个复选框列表，并且基于至少一个选择，需要启用或禁用一个按钮。

复选框具有名称，因为它们需要将值回发到服务器。

这是我试过的代码：

$('input').change(function() {
      console.log('cheeck box change');
    if ($("input[name='name1']:checked").length) {
        
        $('#sub').removeAttr('disabled');
    } else {
        $('#sub').attr('disabled', 'disabled');
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p><input type='checkbox' class='check'> Value</p>
<p><input type='checkbox' class='check'> Value</p>
<p><input type='checkbox' class='check'> Value</p>
<p><input type='checkbox' class='check'> Value</p>
<p><input type='checkbox' class='check'> Value</p>

<input id='sub' type='button' value='Submit' disabled='disabled'>

Answer 1

此脚本可能会帮助您以简单的方式编写它。 只需选中复选框

$("input[type='checkbox']") 和 onclick $("input[type='submit']").attr("disabled", !checkboxes.is(":checked"));

这里有完整的源代码

var checkboxes = $("input[type='checkbox']"),
    submitButt = $("input[type='submit']");

checkboxes.click(function() {
    submitButt.attr("disabled", !checkboxes.is(":checked"));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>Button should be enabled if at least one checkbox is checked</h1>

<form>
    <div>
        <input type="checkbox" name="option-1" id="option-1"> <label for="option-1">Option 1</label>
    </div>
    <div>
        <input type="checkbox" name="option-2" id="option-2"> <label for="option-2">Option 2</label>
    </div>
    <div>
        <input type="checkbox" name="option-3" id="option-3"> <label for="option-3">Option 3</label>
    </div>
    <div>
        <input type="checkbox" name="option-4" id="option-4"> <label for="option-4">Option 4</label>
    </div>
    <div>
        <input type="checkbox" name="option-5" id="option-5"> <label for="option-5">Option 5</label>
    </div>
    
    <div>
        <input type="submit" value="Do thing" disabled>
    </div>
</form>

来源：http://jsfiddle.net/chriscoyier/BPhZe/76/

这是 Chris Coyier 的作品，谢谢，Chris。

Answer 2

看起来您在选择器"input[name='name1']:checked" 中犯了一个小错误，应该改为"input[type='checkbox']:checked"。

目前，您正在选择具有 name='name1' 的输入元素，这些元素与您的任何复选框都不匹配，因为它们都没有值为 "name1" 的名称属性。

因此，请考虑以下更改：

$('input').change(function() {
      console.log('cheeck box change');
    if ($("input[type='checkbox']:checked").length) { // <-- update this line
        
        $('#sub').removeAttr('disabled');
    } else {
        $('#sub').attr('disabled', 'disabled');
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p><input type='checkbox' class='check'> Value</p>
<p><input type='checkbox' class='check'> Value</p>
<p><input type='checkbox' class='check'> Value</p>
<p><input type='checkbox' class='check'> Value</p>
<p><input type='checkbox' class='check'> Value</p>

<input id='sub' type='button' value='Submit' disabled='disabled'>

如果您需要表单以这种方式工作，并希望通过名称选择器选择元素，您可以执行以下操作：

$('input').change(function() {
      console.log('cheeck box change');
    if ($("input[name]:checked").length) { // <-- update this line
        
        $('#sub').removeAttr('disabled');
    } else {
        $('#sub').attr('disabled', 'disabled');
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p><input type='checkbox' name='name-1' class='check'> Value</p>
<p><input type='checkbox' name='name-2' class='check'> Value</p>
<p><input type='checkbox' name='name-3' class='check'> Value</p>
<p><input type='checkbox' name='name-4' class='check'> Value</p>
<p><input type='checkbox' name='name-5' class='check'> Value</p>

<input id='sub' type='button' value='Submit' disabled='disabled'>

Answer 3

试试这个解决方案。

$('input[type="checkbox"]').click(function(){
        if($(this).prop("checked") == true){
            document.getElementById("sub").disabled = true;
        }
        else if($(this).prop("checked") == false){
            document.getElementById("sub").disabled = false;
        }
    });

并检查此链接：Try this link