Question

当我的页面加载时，我希望禁用所有未选中的框：

<form action="demo_form.asp" method="get">
  <input type="checkbox" name="vehicle" value="Bike"> I have a bike<br>
  <input type="checkbox" name="vehicle" value="Car" checked> I have a car<br>
  <input type="submit" value="Submit">
</form>

我尝试使用此代码，但它无效：

  $(document).ready(function(){
        if($(".test").is(':checked'))
            $(".test").attr("disabled", false);
        else
            $(".test").attr("disabled", true);
    });

https://jsfiddle.net/m7ny2Le7/1/

Answer 1

您可以使用 :not(:checked) 过滤未选中的复选框

$(document).ready(function() {
  $(":checkbox:not(:checked)").prop('disabled', true)
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form action="demo_form.asp" method="get">
  <input type="checkbox" name="vehicle" value="Bike">I have a bike
  <br>
  <input type="checkbox" name="vehicle" value="Car" checked>I have a car
  <br>
  <input type="submit" value="Submit">
</form>

此外，您可以将 prop() 与回调

一起使用

$(document).ready(function() {
  $(":checkbox").prop('disabled', function() {
    return !this.checked;
  })
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form action="demo_form.asp" method="get">
  <input type="checkbox" name="vehicle" value="Bike">I have a bike
  <br>
  <input type="checkbox" name="vehicle" value="Car" checked>I have a car
  <br>
  <input type="submit" value="Submit">
</form>

注意：在您的代码中，我看不到test类，因此我使用 :checkbox 来引用所有复选框。< / p>

Answer 2

FIDDLE

$(document).ready(function() {
    $("#form").find('.test').each(function() {
        if ($(this).is(':checked'))
            $(this).attr("disabled", false);
        else
            $(this).attr("disabled", true);
    });
});

使用.each浏览所有复选框

Answer 3

只需使用:not选中所有未选中的复选框，然后将其设置为已停用：

 $('input:checkbox:not(:checked)').prop('disabled', true);

Updated Fiddle

Answer 4

.test是类，所以你想要遍历该类的元素：

＆＃13;

$(".test").each(function() {
  $(this).prop("disabled", $(this).prop("checked"));
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="demo_form.asp" method="get">
  <input type="checkbox" name="vehicle" value="Bike" class="test">I have a bike
  <br>
  <input type="checkbox" name="vehicle" value="Car" checked class="test">I have a car
  <br>
  <input type="submit" value="Submit">
</form>

＆＃13;

Answer 5

试试这个，它有效。你必须迭代

  $(document).ready(function(){
        $(".test").each(function(){

            if($(this).is(':checked')){

                $(this).attr("disabled", false);
            } else {
                $(this).attr("disabled", true);
            }
        }); 
    });

Answer 6

这是一个可能的解决方案：https://jsfiddle.net/m7ny2Le7/4/

  $(document).ready(function(){
      $("input[name='vehicle']").attr("disabled", true);

        if($("input[name='vehicle']:checked").length > 0)
            $("input[name='vehicle']:checked").attr("disabled", false); 
    });

如何在pageload上禁用所有未经检查的框？

6 个答案: