我有一组简单的复选框，可以检查多个选项，但我希望它的行为类似于单选按钮，其中总会有一个选项被选中。
正如您在我的代码中看到的那样，复选框将被选中，而不是取消选中。请让我知道我做错了什么。感谢
$('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"/>
答案 0 :(得分：3)
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" />
答案 1 :(得分：1)
如果您想允许多次检查，但不允许零检查，则此代码应该足够：
$('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"/>
答案 2 :(得分：0)
试试这个：
$(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/>
答案 3 :(得分：0)
如果您想阻止取消选中已选中的复选框：
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" />
答案 4 :(得分：0)
不一定回答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"> <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"> <strong>Email</strong>
</label>
</div>
<input class="form-control" id="email" name="email" autocomplete="email" type="text" placeholder="Enter you email address">
</div>
...