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']")并单击$("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）的作品，谢谢克里斯。

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

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

3 个答案: