jQuery .prop（'checked'，true）不起作用

Question

我有一组简单的复选框，可以检查多个选项，但我希望它的行为类似于单选按钮，其中总会有一个选项被选中。

正如您在我的代码中看到的那样，复选框将被选中，而不是取消选中。请让我知道我做错了什么。感谢

＆＃13;

＆＃13;

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

	});

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

event.preventDefault()使您的.prop无效

选中复选框后，您还需要取消选中其他人。

＆＃13;

＆＃13;

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


});

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

如果您想允许多次检查，但不允许零检查，则此代码应该足够：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 3

试试这个：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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>
...