jQuery .prop('checked', true) 不起作用。

Question

我有一组简单的复选框，可以选择多个选项，但我希望它的行为像单选按钮一样，始终只有一个选项被选中。

正如您在我的代码中看到的那样，复选框将会被选中，然后再取消选中。请告诉我我做错了什么。谢谢。

$('input[type=checkbox]').on('click', function(event) {
  event.preventDefault();
  if($('input[type=checkbox]:checked').length === 1 && $(this).is(':checked')) {
    return false; 
                // there is only one checked AND the checked one is $this and we want to prevent it from uncheck
  } else {
   $(this).prop('checked', true);
   alert($(this).prop('checked')); // this return true
  } 

 });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<input type="checkbox" checked="checked"/>
    <input type="checkbox"/>
        <input type="checkbox"/>

- aahhaa

---

如果(cond){return false} return false。为什么不直接使用return false呢？而且在jQuery中，return false包含了preventDefault的功能。 - Oriol

我之前尝试过你的方法，但似乎它会干扰长度的数学计算... 我不能确定它是否会计算当前被检查的那个... ??? - aahhaa

你想要仅检查一个项目还是至少检查一个项目？ - Rick Hitchcock

至少一个，感谢大家的帮助，但它还需要能够检查多个。 - aahhaa

Answer 1

event.preventDefault()会导致你的.prop不起作用。

当一个复选框被选中时，你还需要取消其他复选框的选择。

$('input[type=checkbox]').on('click', function(event) {
  // Remove this line
  // event.preventDefault();
  
  if ($('input[type=checkbox]:checked').length === 1) {
    if ($(this).is(':checked')) {
      return false; // this is checked
    }
    return false; // and this is the only one check 
  } else {
    
    // Uncheck others
    $('input[type=checkbox]').prop('checked', false);
    
    $(this).prop('checked', true);
    alert($(this).prop('checked')); // this return true
  }


});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<input type="checkbox" checked="checked" />
<input type="checkbox" />
<input type="checkbox" />

- Neverever

---

event.preventDefault() 会导致你的 .prop 失效，谢谢。我已经反复阅读了文档，但没有找到关于这个问题的任何信息... 谢谢。 - aahhaa

Answer 2

如果你想允许进行多个检查，但不允许零次检查，那么这段代码应该就足够了：

$('input[type=checkbox]').on('click', function(event) {
  if(!$('input[type=checkbox]:checked').length) {
    $(this).prop('checked', true);
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<input type="checkbox" checked="checked"/>
    <input type="checkbox"/>
        <input type="checkbox"/>

- Rick Hitchcock

Answer 3

虽然这不一定回答了OP的问题，但它可能会帮助一些像我一样来到这里的人。

在我的情况下，我有多个复选框检查哪个输入应该提交到表单，但只有其中两个是至少必须选中一个的。同时使用jQuery 1.11。

编辑1：2019-12-10

添加代码以更改checked="checked"属性。

编辑2：2019-12-11

添加代码以更改value="1"或value="0"属性。

var checkbox_phone = $('.checkbox label[for="tel"] input')
var checkbox_email = $('.checkbox label[for="email"] input')
checkbox_phone.change(function() {
    var set_to_true = $(this).prop('checked') ? 'true' : 'false';
    if (set_to_true == 'true') {
        checkbox_phone.attr('checked', 'checked'); // EDIT 1
        checkbox_phone.attr('value', '1'); // EDIT 2
    } else {
        checkbox_phone.removeAttr('checked'); // EDIT 1
        checkbox_phone.attr('value', '0'); // EDIT 2
        checkbox_email.prop('checked', true);
        checkbox_email.attr('checked', 'checked'); // EDIT 1
        checkbox_email.attr('value', '1'); // EDIT 2
    }
});
checkbox_email.change(function() {
    var set_to_true = $(this).prop('checked') ? 'true' : 'false';
    if (set_to_true == 'true') {
        checkbox_email.attr('checked', 'checked'); // EDIT 1
        checkbox_email.attr('value', '1'); // EDIT 2
    } else {
        checkbox_email.removeAttr('checked'); // EDIT 1
        checkbox_email.attr('value', '0'); // EDIT 2
        checkbox_phone.prop('checked', true);
        checkbox_phone.attr('checked', 'checked'); // EDIT 1
        checkbox_phone.attr('value', '1'); // EDIT 2
    }
});

...
<!-- Phone number -->
<div>
    <div class="checkbox">
        <label for="tel">
            <input type="checkbox" value="1" checked="checked">&nbsp;&nbsp;&nbsp;<strong>Phone</strong>
        </label>
    </div>
    <input class="form-control" id="tel" name="tel" autocomplete="tel" type="text" placeholder="Enter your phone number" >
</div>
<!-- E-mail -->
<div>
    <div class="checkbox">
        <label for="email">
            <input type="checkbox" value="1" checked="checked">&nbsp;&nbsp;&nbsp;<strong>Email</strong>
        </label>
    </div>
    <input class="form-control" id="email" name="email" autocomplete="email" type="text" placeholder="Enter you email address">
</div>
...

- s3c

Answer 4

这里有另一种非常有效且从未失败的方法

$("#target1").removeAttr('checked'); // Remove checked property 
$("#target2").attr('checked','checked'); // Add checked Property 

希望这能有所帮助。

- Paras Sharma

Answer 5

Try this instead:

$(function() {
  $('input:checkbox').on('click', function() {
    this.checked = $('input:checked').length ? this.checked : true;
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input type='checkbox' />
<input type='checkbox' />
<input type='checkbox' />
<input type='checkbox' checked/>

- user2575725

---

抱歉，也许我表达不够清楚，我需要至少选中一个，但也可以选择两个或更多。 - aahhaa

Answer 6

如果您想防止选中的复选框被取消选中：

var $checkbox = $('input[type=checkbox]').on('click', function() {
  $checkbox.prop('checked', false);
  this.checked = true;
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<input type="checkbox" checked="checked" />
<input type="checkbox" />
<input type="checkbox" />

如果你想要取消选中的内容：

var $checkbox = $('input[type=checkbox]').on('click', function() {
  $checkbox.not(this).prop('checked', false);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<input type="checkbox" checked="checked" />
<input type="checkbox" />
<input type="checkbox" />

- Oriol