我正在构建一个带有动态行的表单(我已经解决了)和我无法解决的动态启用-禁用复选框
这段代码应该像这样工作:我选择“which-cruise”,然后我可以添加一个/六个类,但我应该首先单击“your-extra-options”以启用 6 个复选框。在第一行它工作得很好但是当我添加(通过克隆)更多行时,每个“your-extra-options”复选框只处理从第一行启用/禁用 6 个复选框
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 Extra 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 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;
for (var i = startIndex; i < 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>