jquery多个复选框启用文本字段 [英] jquery multiple check box enable text field
问题描述
确定，因为没有一个工作，我不得不只是显示我的实际代码，而不是一个例子。我只是试图使用一个例子，然后应用它我的问题，但没有一个解决方案与我的情况。
ok, since none of these worked, im going to have to just display my actual code instead of an example. i was just trying to use an example then apply it to my problem, but none of your solutions worked with my situation.
所以这里。 $ stuff来自mysql并且启用或禁用，如果$ stuff是enabled，则需要检查复选标记，如果disabled，则取消选中复选标记。
so here it is. $stuff comes from mysql and is either enabled or disabled, the check mark needs to be checked if the $stuff is 'enabled' or unchecked if 'disabled'.
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代码
This is was my previous jquery code
$(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);
}
}
如果测试你可以看到顶部的复选标记函数与窗体上的第二个输入。
if tested you can see that the top check mark only functions with the 2nd input on the form.
我的情况：在这种形式下，你有两个值$ stuff1和$ stuff2，它们的选项是启用或禁用，他们永远不会一致。当php test的值被启用时，该值检查复选标记，并启用3个框字段。如果它被禁用，复选标记被取消选中，并且3个框显示为灰色。用户现在可以检查（启用）复选标记并显示3个文本字段，或取消选中（禁用）复选标记并灰化3个字段。
My situation: in this form, you have 2 values $stuff1 and $stuff2, the options they have are either enabled or disabled, they will never be consistent. when php test's if the value is enabled, the value checks the check mark, and enables the 3 box fields. if it's disabled, the check mark is unchecked and the 3 boxes display is as grayed out. The user can now check (to enable) the checkmark and display the 3 text fields, or uncheck (to disable) the check mark and gray out the 3 fields.
此将最终转到底部的POST，并将字段和复选标记的所有值返回到mysql。
this will eventually goto a POST at the bottom and send all the values of the fields and the check marks back to mysql.
我能够在这里完成这个无瑕疵 http://jsfiddle.net/MVGys/9/ 在同一个表格上只有一个复选标记，而不是多个复选标记。
I was able to do this flawless here http://jsfiddle.net/MVGys/9/ with only 1 checkmark, not multiple checkmarks on the same form.
推荐答案
更新答案
你似乎试图完成我认为使用类和数据属性可能作为最简单和最灵活的解决方案。
Given what you seem to be trying to accomplish I think using classes and data attributes might serve as the easiest and most flexible solution.
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 ...等。
I have given every input you want to disable/enable a class. E.g. group_[a|b] Then I gave the check-box controls a class group_ctrl and a data attribute named group (data-group) with the corresponding group class it is responsible for controlling as the value. You can duplicate this pattern as many times as needed. E.g. group_c, group_d, group_e... etc.
这篇关于jquery多个复选框启用文本字段的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
