I have listview with two checkboxes in itemtemplate. I want to validate that user can only select only one checkbox in each row.
Asked
Active
Viewed 1,215 times
1
-
Are you willing to use any javascript libraries? – Evil Andy Sep 24 '10 at 10:20
-
Why aren't you using radio groups? – Quentin Sep 25 '10 at 16:11
-
This answer fixes the issue https://stackoverflow.com/questions/9709209/html-select-only-one-checkbox-in-a-group/9709425#9709425 – Brian Mutiso Oct 01 '21 at 12:36
3 Answers
2
The behaviour you're describing is accomplished using standard HTML radiobuttons. If you change your design to use these you'll get the benefit that
- The user can only select a single item, no extra javascript needed
- Users expect to be able to choose multiple checkboxes but only a single radiobutton IE you're working with their expectations
If you're still sure you want to use jQuery then something like this should do it.
$(':checkbox').change(function(){
if($(this).attr('checked')) {
$(this).siblings(':checkbox').attr('checked',false);
}
});

Evil Andy
- 1,748
- 1
- 14
- 19
-
cannot use radiobuttons as I am doing something like user can select All option for either of the two check boxes or he can select individual checkbox but he cannot select both the options at a time.Its purpose is it send either mail or sms to end users from list. – vinit Sep 24 '10 at 10:29
0
Thanks for the reply. had also asked one of my friend and he gave me the following solution which is working fine. Posting it, if anybody needs it.-
say ur checkboxes in the 2 clumns are named EmailCheckBox and SMSCheckBox
then use this code to toggle the checkboxes in each single row:
$('input:checkbox[id*=EmailCheckBox]').click(uncheckOthercheckbox);
$('input:checkbox[id*=SMSCheckBox]').click(uncheckOthercheckbox);
function uncheckOthercheckbox() {
if (this.id.indexOf("EmailCheckBox") != -1) {
var otherCheckBoxId = this.id.substring(0, this.id.indexOf("EmailCheckBox")) + "SMSCheckBox";
}
else {
var otherCheckBoxId = this.id.substring(0, this.id.indexOf("SMSCheckBox")) + "EmailCheckBox";
}
var i = "#" + otherCheckBoxId;
if (this.checked) {
$(i).removeAttr('checked');
}
}
0
@vinit, just a little change, you forgot the else part,
$('input:checkbox[id*=EmailCheckBox]').click(uncheckOthercheckbox);
$('input:checkbox[id*=SMSCheckBox]').click(uncheckOthercheckbox);
function uncheckOthercheckbox() {
if (this.id.indexOf("EmailCheckBox") != -1) {
var otherCheckBoxId = this.id.substring(0, this.id.indexOf("EmailCheckBox")) + "SMSCheckBox";
}
else {
var otherCheckBoxId = this.id.substring(0, this.id.indexOf("SMSCheckBox")) + "EmailCheckBox";
}
var i = "#" + otherCheckBoxId;
if (this.checked) {
$(i).removeAttr('checked');
}
else {
if ($(i).attr('checked') === false) {
$(i).attr('checked', 'checked');
}
}
}

nash
- 1
- 1