forms - how to add dynamic enable/disable checkboxes to dynamic table in jquery? -

forms - how to add dynamic enable/disable checkboxes to dynamic table in jquery? -

i'm building form dynamic rows (i've solved already) , dynamic enable-disable checkboxes can't resolve

this code should work this: i'm choosing "which-cruise" , can add together one/six classes should first click "your-extra-options" have 6-checkboxes enabled. on first row works great when add together (by cloning) more rows every "your-extra-options" checkbox handles enabling/disabling 6-checkboxes first row

html

<table class="reference" id="secondaryemails" style="width: 800px;"> <tr> <td> <select name="which-cruise"> <option>first cruise</option> <option>second cruise</option> <option>third cruise</option> <option>fourth cruise</option> </select> </td> <td> <input type="checkbox" name="your-extra-options" value="your options" onclick="enabledisable(this,'extra_class','first_class','second_class','third_class','lower_class','rock-bottom_class')" /> </td> <td> <input disabled="disabled" type="checkbox" name="extra_class" value="extra class" /> </td> <td> <input disabled="disabled" type="checkbox" name="first_class" value="first class" /> </td> <td> <input disabled="disabled" type="checkbox" name="second_class" value="second class" /> </td> <td> <input disabled="disabled" type="checkbox" name="third_class" value="third class" /> </td> <td> <input disabled="disabled" type="checkbox" name="lower_class" value="lower class" /> </td> <td> <input disabled="disabled" type="checkbox" name="rock-bottom_class" value="rock-bottom class" /> </td> <td> <input type="checkbox" name="breakfast" value="breakfast" /> </td> <td> <input type="checkbox" name="lunch" value="lunch" /> </td> <td> <input type="button" name="add" value="add" class="tr_clone_add2"> </td> </tr> </table>

script

<script src="http://code.jquery.com/jquery-1.6.4.js"></script> <script type="text/javascript"> $("input.tr_clone_add").live('click', function () { var $tr = $(this).closest('.tr_clone'); var $clone = $tr.clone(); $clone.find(':text').val(''); $tr.after($clone); }); var count = $("table.reference tr").length; $("input.tr_clone_add2").live('click', function () { count++; var $clone = $("#secondaryemails tbody tr:first").clone(); $clone.attr({ id: "emlrow_" + count, name: "emlrow_" + count, style: "" // remove "display:none" }); $clone.find("input,select").each(function () { $(this).attr({ id: $(this).attr("id") + count, name: $(this).attr("name") + count }); }); $("#secondaryemails tbody").append($clone); }); function enabledisable(ochk) { var disable = !ochk.checked; var arglen = arguments.length; var obj, startindex = 1; var frm = ochk.form; (var = startindex; < arglen; i++) { obj = frm.elements[arguments[i]]; if (typeof obj == "object") { if (document.layers) { if (disable) { obj.onfocus = new function("this.blur()"); if (obj.type == "text") obj.onchange = new function("this.value=this.defaultvalue"); } else { obj.onfocus = new function("return"); if (obj.type == "text") obj.onchange = new function("return"); } } else obj.disabled = disable; } } } </script>

my solution relies on jquery >= v1.7 should able similar deprecated live() method instead of newer on() method.

basically add together event listener table doesn't matter how many rows added table dynamically. every time click on checkbox class "your-extra-options" detected, hunt downwards relevant class checkboxes in particular row , enable/disable them appropriate. like:

$(document).ready(function() { var table = $('#secondaryemails'); table.on('click', '.your-extra-options', function() { var checkbox = $(this); // find relevant checkboxes in same row clicked "your-extra-options" checkbox var class_checkboxes = checkbox.closest('tr').find('.class-checkbox'); var disable_classes = checkbox.prop('checked') ? false : true; class_checkboxes.prop('disabled', disable_classes); }); });

in terms of html, requires add together class "your-extra-options" first row input name "your-extra-options" , add together class "class-checkbox" each checkbox relates booking class (e.g. first class, lower class etc.)

you should remove onclick="" "your-extra-options" checkbox since no longer used.

example fiddle here

jquery forms checkbox