On Selecting A Checkbox Disable Spefic Checkboxes
I have a table of checkboxes, on selecting a certain checkbox I need to disable specific checkboxes. I can do this with jquery but I'm having trouble with distinguishing between th
Solution 1:
Hi please find tested and verified code as follows :
<!DOCTYPE htmlPUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html; charset=utf-8" /><title>Untitled Document</title><scriptsrc="http://code.jquery.com/jquery-latest.min.js"type="text/javascript"></script><script>
$(document).ready(function () {
$('#new_user_form *').filter(':checkbox').change(function() {
if(this.id=='row1' && this.value=='3' && $(this).is(':checked')) {
$('#new_user_form *').filter(':checkbox').each(function(){
if(this.id=='row1' && this.value=='3') {
} else {
$(this).attr("checked",false);
}
});
}
if((this.id=='row2' || this.id=='row3' || this.id=='row4' || this.id=='row5' || this.id=='row6') && this.value=='3') {
var checkedId = this.id;
var checkedOrNot = $(this).is(':checked');
$('#new_user_form *').filter(':checkbox').each(function(){
if(this.id==checkedId && (this.value=='1' || this.value=='2')) {
if(checkedOrNot) {
$(this).attr("disabled",true);
} else {
$(this).attr("disabled",false);
}
}
});
}
if((this.id=='row2' || this.id=='row3' || this.id=='row4' || this.id=='row5' || this.id=='row6') && this.value=='2') {
var checkedId = this.id;
var checkedOrNot = $(this).is(':checked');
$('#new_user_form *').filter(':checkbox').each(function(){
if(this.id==checkedId && this.value=='1') {
if(checkedOrNot) {
$(this).attr("disabled",true);
} else {
$(this).attr("disabled",false);
}
}
});
}
});
});
</script></head><body><formid="new_user_form"><tableid="mytb"class="table table-hover table-condensed"><thead><tr><thstyle="width: 25%;">Column 1</th><thstyle="width: 25%">Column 2</th><thstyle="width: 25%">Column 3</th><thstyle="width: 25%">Column 4</th></tr></thead><tbody><tr><td>Row 1</td><tdclass="vcenter"><inputtype="checkbox"id="row1"value="1"/></td><tdclass="vcenter"><inputtype="checkbox"id="row1"value="2"/></td><tdclass="vcenter"><inputtype="checkbox"id="row1"value="3"/></td></tr><tr><td>Row 2</td><tdclass="vcenter"><inputtype="checkbox"id="row2"value="1"/></td><tdclass="vcenter"><inputtype="checkbox"id="row2"value="2"/></td><tdclass="vcenter"><inputtype="checkbox"id="row2"value="3"/></td></tr><tr><td>Row 3</td><tdclass="vcenter"><inputtype="checkbox"id="row3"value="1"/></td><tdclass="vcenter"><inputtype="checkbox"id="row3"value="2"/></td><tdclass="vcenter"><inputtype="checkbox"id="row3"value="3"/></td></tr><tr><td>Row 4</td><tdclass="vcenter"><inputtype="checkbox"id="row4"value="1"/></td><tdclass="vcenter"><inputtype="checkbox"id="row4"value="2"/></td><tdclass="vcenter"><inputtype="checkbox"id="row4"value="3"/></td></tr><tr><td>Row 5</td><tdclass="vcenter"><inputtype="checkbox"id="row5"value="1"/></td><tdclass="vcenter"><inputtype="checkbox"id="row5"value="2"/></td><tdclass="vcenter"><inputtype="checkbox"id="row5"value="3"/></td></tr><tr><td>Row 6</td><tdclass="vcenter"><inputtype="checkbox"id="row6"value="1"/></td><tdclass="vcenter"><inputtype="checkbox"id="row6"value="2"/></td><tdclass="vcenter"><inputtype="checkbox"id="row6"value="3"/></td></tr></tbody></table></form></body></html>Copy paste and enjoy :) cheers
Solution 2:
Please add following code to the jQuery above, inside change function where other if statements are:
if(this.id=='row1' && this.value=='1') {
if($(this).is(':checked')) {
$('#new_user_form *').filter(':checkbox').each(function(){
if(this.id=='row1' && this.value=='1') {
} else {
$(this).attr("disabled",true);
}
});
} else {
$('#new_user_form *').filter(':checkbox').each(function(){
if(this.id=='row1' && this.value=='1') {
} else {
$(this).attr("disabled",false);
}
});
}
}
if(this.id=='row1' && this.value=='2') {
if($(this).is(':checked')) {
$('#new_user_form *').filter(':checkbox').each(function(){
if(this.id=='row1' && this.value=='2') {
} else {
$(this).attr("disabled",true);
}
});
} else {
$('#new_user_form *').filter(':checkbox').each(function(){
if(this.id=='row1' && this.value=='2') {
} else {
$(this).attr("disabled",false);
}
});
}
}
Solution 3:
Jquery code:
$('#chkPersonalDetails').click(function () {
var checkedStatus = this.checked;
$('span[rel=pe]').find('input').attr("checked", checkedStatus);
});
ASPX code.
<asp:CheckBoxID="chkPersonalDetails"runat="server"Text="Personal Details"rel="pe"/><asp:CheckBoxID="chkSearchAddress"runat="server"Text="Address"rel="pe"/><asp:CheckBoxID="chkSearchPhone"runat="server"Text="Phone"rel="pe"/><asp:CheckBoxID="chkSearchSex"runat="server"Text="Sex"rel="pe"/>So what I am doing is selecting all the checkboxes that have the rel attribute as rel=pre I am checking or unchecking based on the first check box.
So accordingly use this code as per your requirement. Hope you got me!!
Cheers!!
Solution 4:
Have a look at this: http://api.jquery.com/multiple-attribute-selector/.
An attempt without checking the actual checkbox ID but based on the position of the DOM is:
$( ":checkbox" ).on('click', function(e){
var originatingCheckbox = this;
var siblings =$(originatingCheckbox).parentUntil('tr').find(":checkbox");
siblings.each(function(e){
if(originatingCheckbox != this)
{
if(originatingCheckbox.checked){
this.checked = false;
$(this).attr("disabled", true);
}else{
$(this).removeAttr("disabled");
}
}
});
});
However an HTML document should have elements with unique IDs, use name instead, name attribute can be repeated.
You can alternatively also use document.getElementsByName('row1') which will return an array of elements matching that name. You could do a simple loop to check which value each have and if they are checked.
Post a Comment for "On Selecting A Checkbox Disable Spefic Checkboxes"