以前的问题checkbox enable onload to display other elements
好吧,因为这些都不起作用,我只需要显示我的实际代码而不是一个例子。我只是试图用一个例子然后将它应用到我的问题,但你的解决方案都没有适应我的情况。所以在这里。 $ stuff来自mysql并且启用或禁用,如果$ stuff'已启用',则需要检查复选标记,如果'禁用'则需要取消选中。
HTML
<tr>
<td>blah</td>
<td>
<?php
if ($stuff1 == 'enabled'){
echo "<input type='checkbox' name='a1' id='checker' checked=checked>";
} else {
echo "<input type='checkbox' name='a1' id='checker'>";
}
?>
</td>
<td></td>
</tr>
<tr>
<td><div align="right">a1:</div></td>
<td><input id="tb1" type='text' name='a1_1' size='25' maxlength='5' value='<?php echo $a1_1 ?>'></td>
<td> </td>
</tr>
<tr>
<td><div align="right">a2:</div></td>
<td><input id="tb2" type='text' name='a2_2' size='25' maxlength='5' value='<?php echo $a2_2 ?>'></td>
<td> </td>
</tr>
<tr>
<td><div align="right">a3:</div></td>
<td><input id="tb3" type='text' name='a3_3' size='25' maxlength='5' value='<?php echo $a3_3 ?>'></td>
<td> </td>
</tr>
<tr>
<td><div align="center">Activate Something Else</div></td>
<td>
<?php
if ($stuff2 == 'enabled'){
echo "<input type='checkbox' name='b1' id='checker2' checked=checked>";
} else {
echo "<input type='checkbox' name='b1' id='checker2'>";
}
?>
</td>
<td></td>
</tr>
<tr>
<td><div align="right">b1:</div></td>
<td><input id="tb4" name="b1_1" type="text" size="25" maxlength='5' value='<?php echo $b1_1 ?>'></td>
<td> </td>
</tr>
<tr>
<td><div align="right">b2:</div></td>
<td><input id="tb5" name="b2_2" type="text" size="25" maxlength='5' value='<?php echo $b2_2 ?>'></td>
<td> </td>
</tr>
<tr>
<td><div align="right">b3:</div></td>
<td><input id="tb6" name="b3_3" type="text" size="25" maxlength='5' value='<?php echo $b3_3 ?>'></td>
<td> </td>
</tr>
这是我以前的jquery代码
$(document).ready(function() {
toggleInputs($('#checker'));
$('#checker').click(function () {
toggleInputs($(this));
});
});
function toggleInputs(element) {
if (element.prop('checked')) {
$('#tb1').prop('disabled', false);
$('#tb2').prop('disabled', false);
$('#tb3').prop('disabled', false);
} else {
$('#tb1').prop('disabled', true);
$('#tb2').prop('disabled', true);
$('#tb3').prop('disabled', true);
}
}
如果经过测试,您可以看到顶部复选标记仅与表格上的第二个输入一起使用。
我的情况:在这种形式下,你有2个值$ stuff1和$ stuff2,他们拥有的选项是启用还是禁用,它们永远不会一致。当php测试时,如果该值已启用,则该值将检查复选标记,并启用3个框字段。如果它被禁用,则取消选中复选标记,并且3个框显示为灰色。用户现在可以检查(启用)复选标记并显示3个文本字段,或取消选中(禁用)复选标记并使3个字段变灰。
这将最终转到底部的POST并将字段的所有值和复选标记发送回mysql。
我能够在http://jsfiddle.net/MVGys/9/处完美无缺,只有1个复选标记,而不是同一表单上的多个复选标记。
答案 0 :(得分:1)
使用nextUntil()
查找下一个复选框旁边的所有文本框并切换它们。您正在使用元素的ID,请注意您也可以使用元素的类型来选择和处理它们。
$(document).ready(function () {
// add click function and then call toggleInputs on every checkbox on the page
$('input[type=checkbox]').click(function () {
toggleInputs($(this));
}).each(function () {
toggleInputs($(this));
});
});
function toggleInputs(element) {
// careful, it will find all elements until next checkbox
element.nextUntil('input[type=checkbox]').prop('disabled', !element.prop('checked'));
}
但严重的是,您需要正确构建HTML代码。如果你这样做,你可以更有效和有意义地使用parent()
,siblings()
等功能。
答案 1 :(得分:1)
更新了答案
鉴于您似乎想要实现的目标,我认为使用类和数据属性可能是最简单,最灵活的解决方案。
OP的HTML(已修改)
<table>
<tr>
<td>blah</td>
<td>
<input type='checkbox' name='a1' class="group_ctrl" data-group="group_a" id='checker'>
</td>
<td></td>
</tr>
<tr>
<td>
<div align="right">a1:</div>
</td>
<td>
<input id="tb1" type='text' class="group_a" name='a1_1' size='25' maxlength='5' value='a1_1'>
</td>
<td> </td>
</tr>
<tr>
<td>
<div align="right">a2:</div>
</td>
<td>
<input id="tb2" type='text' class="group_a" name='a2_2' size='25' maxlength='5' value='a2_2'>
</td>
<td> </td>
</tr>
<tr>
<td>
<div align="right">a3:</div>
</td>
<td>
<input id="tb3" type='text' class="group_a" name='a3_3' size='25' maxlength='5' value='a3_3'>
</td>
<td> </td>
</tr>
<tr>
<td>
<div align="center">Activate Something Else</div>
</td>
<td>
<input type='checkbox' name='b1' class="group_ctrl" data-group="group_b" id='checker2' checked=checked>
</td>
<td></td>
</tr>
<tr>
<td>
<div align="right">b1:</div>
</td>
<td>
<input id="tb4" name="b1_1" class="group_b" type="text" size="25" maxlength='5' value='b1_1'>
</td>
<td> </td>
</tr>
<tr>
<td>
<div align="right">b2:</div>
</td>
<td>
<input id="tb5" name="b2_2" class="group_b" type="text" size="25" maxlength='5' value='b2_2'>
</td>
<td> </td>
</tr>
<tr>
<td>
<div align="right">b3:</div>
</td>
<td>
<input id="tb6" name="b3_3" class="group_b" type="text" size="25" maxlength='5' value='b3_3'>
</td>
<td> </td>
</tr>
</table>
<强> JQuery的强>
$(document).ready(function() {
$('.group_ctrl').change(function () {
// gets data-group value and uses it in the outer selector
// to select the inputs it controls and sets their disabled
// property to the negated value of it's checked property
$("." + $(this).data("group")).prop('disabled', !this.checked);
}).change();
});
我已经为您要禁用/启用课程的每个输入。例如。 GROUP_ [A | B] 然后我给复选框控制了一个类group_ctrl和一个名为group(data-group)的数据属性,以及它负责控制作为值的相应组类。您可以根据需要多次复制此模式。例如。 group_c,group_d,group_e ......等等。
答案 2 :(得分:1)
最短的:)
$(document).ready(function () {
$('input[type=checkbox]').change(function () {
$(this).nextUntil('input[type=checkbox]').prop('disabled', !this.checked);
}).change();
});
答案 3 :(得分:0)
我想你想这样做:
<form>
<input type="checkbox" name="detailsgiven" id="checker" >
<br>
<input type='text' name="details" id="tb1" value='box1'>
<br>
<input type='text' name="details" id="tb2" value='box2'>
<br>
<input type='text' name="details" id="tb3" value='box3'>
<br><br>
<input type="checkbox" name="detailsgiven" id="checker2" >
<br>
<input type='text' name="details" id="tb4" value='box1'>
<br>
<input type='text' name="details" id="tb5" value='box2'>
<br>
<input type='text' name="details" id="tb6" value='box3'>
<br>
</form>
<script>
toggleInputs($('#checker'));
$('#checker').click(function () {
toggleInputs($(this));
});
function toggleInputs(element) {
if (element.prop('checked')) {
/*
$('#tb1').prop('disabled', false);
$('#tb2').prop('disabled', false);
$('#tb3').prop('disabled', false);
*/
$(element).parent('form').find('input[type=text]').attr('disabled',false);
} else {
/*
$('#tb1').prop('disabled', true);
$('#tb2').prop('disabled', true);
$('#tb3').prop('disabled', true);
*/
$(element).parent('form').find('input[type=text]').attr('disabled',true);
}
}
</script>