[英]Change background color with checkbox, limited number of checkboxes selectable
Desired: User can only click on 2 out of 3 displayed checkboxes; 所需:用户只能在显示的3个复选框中单击2个; when the user clicks on a checkbox, the checkbox background turns orange.
当用户单击复选框时,复选框背景变为橙色。
Currently: The first checkbox selected acts as desired. 当前:第一个复选框处于选中状态。 The second checkbox ticks, but does not change background color.
第二个复选框打勾,但不更改背景颜色。 Upon clicking again, it un-ticks and changes to the desired background color (yet it is not selected).
再次单击时,它将取消勾选并更改为所需的背景颜色(但尚未选择)。 A 3rd checkbox is not selectable whilst two are already selected.
已选择两个复选框时,第三个复选框是不可选择的。
Requesting: Help to achieve the desired, thank you! 要求:帮助达到期望,谢谢!
Fiddle: http://jsfiddle.net/0fkn1xs4/ 小提琴: http : //jsfiddle.net/0fkn1xs4/
Code: 码:
$('input.playerCheckbox').on('change', function(event) {
var selectableFriends = 2;
if($('.playerCheckbox:checked').length > selectableFriends) {
this.checked = false;
}
numberCurrentlySelected = $('.playerCheckbox:checked').length;
if(numberCurrentlySelected < selectableFriends) {
$(this).closest("li").toggleClass("checked");
}
});
$('input.playerCheckbox').on('change', function(event) {
var selectableFriends = 2;
if($('.playerCheckbox:checked').length > selectableFriends) {
this.checked = false;
}
$(this).closest("li").toggleClass("checked", this.checked);
});
A slightly cleaner implementation that does what you want. 一个稍微干净的实现,可以满足您的需求。 Check out the JSFiddle
查看JSFiddle
Try this: 尝试这个:
$('input.playerCheckbox').on('change', function (event) {
var selectableFriends = 2;
if ($('.playerCheckbox:checked').length > selectableFriends) {
this.checked = false;
} else {
$(this).closest("li").toggleClass("checked");
}
numberCurrentlySelected = $('.playerCheckbox:checked').length;
});
$('input.playerCheckbox').on('change', function(event) {
var selectableFriends = 2;
var numberCurrentlySelected = $('.playerCheckbox:checked').length;
if(numberCurrentlySelected > selectableFriends) {
this.checked = false;
}
if(numberCurrentlySelected <= selectableFriends) {
$(this).closest("li").toggleClass("checked");
}
});
I just changed the second part to <= rather than < and then created the numberCurrentlySelected variable earlier on so that you aren't calling querying more than once. 我只是将第二部分更改为<=而不是<,然后在更早的时候创建了numberCurrentlySelected变量,这样您就不会多次调用查询了。 Caeths is better though instead of using a second if statement it just uses an else, makes sense and gets rid of a comparison.
Caeths更好,尽管与其使用第二条if语句,不如使用第二条if语句,但这样做有意义,并且摆脱了比较。
$('input.playerCheckbox').on('change', function(event) {
var selectableFriends = 2;
numberCurrentlySelected = $('.playerCheckbox:checked').length;
if(numberCurrentlySelected <= selectableFriends) {
$(this).closest("li").toggleClass("checked");
}
if($('.playerCheckbox:checked').length > selectableFriends) {
this.checked = false;
$(this).closest("li").removeClass('checked');
}
});
This works in Fiddler for ya. 这适用于Fiddler for ya。
$('.playerCheckbox').change(function() {
if($('.playerCheckbox:checked').length > 2) {this.checked = false; }
else{
if( this.checked == true ) {$(this).closest("li").addClass("checked");}
if( this.checked == false ) {$(this).closest("li").removeClass("checked");}
}
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.