We will see how to toggle HTML elements in table by enabling or
disabling them column wise with the help of check boxes. We will make
use of few of the JQuery functions.
First of all we will make a grid of html elements, like text boxes
here (we can use other elements select options etc. for same). Basically
all the elements in each column will have a class associated with it
and when check boxes in specific column will be checked, html elements
in that specific column will be disabled and vice versa.
Check out the below example:
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$(document).ready(function() {
var cnt = 2;
$("#anc_add").click(function() {
$('#tbl1 tr').last().after('<tr><td class="col_1"><input type="text" name="txtbx1' + cnt + '" value="' + cnt + '"></td><td class="col_2"><input type="text" name="txtbx2' + cnt + '" value="' + cnt + '"></td><td class="col_3"><input type="text" name="txtbx3' + cnt + '" value="' + cnt + '"></td></tr>');
cnt++;
});
$("#anc_rem").click(function() {
$('#tbl1 tr:last-child').remove();
cnt--;
});
$('#chk_col_1').click(function() {
if ($('#chk_col_1').is(':checked')) {
$("#tbl1 .col_1 input").attr('disabled', 'disabled');
$('#spn_col_1').text('Enable Col');
} else {
$("#tbl1 .col_1 input").removeAttr('disabled');
$('#spn_col_1').text('Disable Col');
}
});
$('#chk_col_2').click(function() {
if ($('#chk_col_2').is(':checked')) {
$("#tbl1 .col_2 input").attr('disabled', 'disabled');
$('#spn_col_2').text('Enable Col');
} else {
$("#tbl1 .col_2 input").removeAttr('disabled');
$('#spn_col_2').text('Disable Col');
}
});
$('#chk_col_3').click(function() {
if ($('#chk_col_3').is(':checked')) {
$("#tbl1 .col_3 input").attr('disabled', 'disabled');
$('#spn_col_3').text('Enable Col');
} else {
$("#tbl1 .col_3 input").removeAttr('disabled');
$('#spn_col_3').text('Disable Col');
}
});
});
</script>
</head>
<body>
<a href="javascript:void(0);" id='anc_add' style="border: 1px activeborder solid;padding: 5px 7px;text-decoration: none;color: azure;background-color: cornflowerblue;">Add Row</a>
<a href="javascript:void(0);" id='anc_rem' style="border: 1px activeborder solid;padding: 5px 7px;text-decoration: none;color: azure;background-color: cornflowerblue;">Remove Row</a>
<div style="clear: both;margin: 10px 0;"></div>
<table id="tbl1" border="1">
<tr>
<th><input type="checkbox" id="chk_col_1" name="chk_col_1" value="1"><span id="spn_col_1">Disable Col</span></th>
<th><input type="checkbox" id="chk_col_2" name="chk_col_2" value="1"><span id="spn_col_2">Disable Col</span></th>
<th><input type="checkbox" id="chk_col_3" name="chk_col_3" value="1"><span id="spn_col_3">Disable Col</span></th>
</tr>
<tr>
<td class="col_1"><input type="text" name="txtbx1" value="1"></td>
<td class="col_2"><input type="text" name="txtbx1" value="1"></td>
<td class="col_3"><input type="text" name="txtbx1" value="1"></td>
</tr>
</table>
</body>
</html>
For Live Demo visit :
http://lab.devzone.co.in/enable-disable-html-elements-using-jquery/index.html
0 comments:
Post a Comment