代码之家 › 专栏 › 技术社区 › Simsons

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

validation html jquery javascript

Simsons · 技术社区 · 6 年前

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

以下是我尝试的代码:

$('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'>

3 回复 | 直到 6 年前

chintuyadavsara 6 年前

这个脚本可以帮助您以一种简单的方式编写它。只需选中复选框

$("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/

这是克里斯·科伊尔的作品,谢谢你,克里斯。

Dacre Denny 6 年前

"input[name='name1']:checked" ,应该是 "input[type='checkbox']:checked"

当前'您选择的输入元素 name='name1' 它与任何复选框都不匹配,因为它们都没有具有值的name属性 "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'>

-1

kgdc 6 年前

试试这个办法。

$('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