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

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

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

Answer 3

试试这个：

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

Answer 4

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

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

Answer 5

不一定能回答 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>
...

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

jQuery .prop('checked', true) don't work

html

checkbox

jquery

input

preventdefault