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 html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src="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>
<form id="new_user_form">
<table id="mytb" class="table table-hover table-condensed">
<thead>
<tr>
<th style="width: 25%;">Column 1</th>
<th style="width: 25%">Column 2</th>
<th style="width: 25%">Column 3</th>
<th style="width: 25%">Column 4</th>
</tr>
</thead>
<tbody>
<tr>
<td>Row 1</td>
<td class="vcenter"><input type="checkbox" id="row1" value="1"/></td>
<td class="vcenter"><input type="checkbox" id="row1" value="2"/></td>
<td class="vcenter"><input type="checkbox" id="row1" value="3"/></td>
</tr>
<tr>
<td>Row 2</td>
<td class="vcenter"><input type="checkbox" id="row2" value="1"/></td>
<td class="vcenter"><input type="checkbox" id="row2" value="2"/></td>
<td class="vcenter"><input type="checkbox" id="row2" value="3"/></td>
</tr>
<tr>
<td>Row 3</td>
<td class="vcenter"><input type="checkbox" id="row3" value="1"/></td>
<td class="vcenter"><input type="checkbox" id="row3" value="2"/></td>
<td class="vcenter"><input type="checkbox" id="row3" value="3"/></td>
</tr>
<tr>
<td>Row 4</td>
<td class="vcenter"><input type="checkbox" id="row4" value="1"/></td>
<td class="vcenter"><input type="checkbox" id="row4" value="2"/></td>
<td class="vcenter"><input type="checkbox" id="row4" value="3"/></td>
</tr>
<tr>
<td>Row 5</td>
<td class="vcenter"><input type="checkbox" id="row5" value="1"/></td>
<td class="vcenter"><input type="checkbox" id="row5" value="2"/></td>
<td class="vcenter"><input type="checkbox" id="row5" value="3"/></td>
</tr>
<tr>
<td>Row 6</td>
<td class="vcenter"><input type="checkbox" id="row6" value="1"/></td>
<td class="vcenter"><input type="checkbox" id="row6" value="2"/></td>
<td class="vcenter"><input type="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:CheckBox ID="chkPersonalDetails" runat="server" Text="Personal Details"
rel="pe"/>
<asp:CheckBox ID="chkSearchAddress" runat="server" Text="Address"
rel="pe"/>
<asp:CheckBox ID="chkSearchPhone" runat="server" Text="Phone"
rel="pe"/>
<asp:CheckBox ID="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"