javascript - jquery 多个复选框启用文本字段

Question

来自之前的问题 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>&nbsp;</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>&nbsp;</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>&nbsp;</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>&nbsp;</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>&nbsp;</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>&nbsp;</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 个复选标记，而不是同一表单上的多个复选标记。

Answer 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>&nbsp;</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>&nbsp;</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>&nbsp;</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>&nbsp;</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>&nbsp;</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>&nbsp;</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();
});

fiddle

我已经给出了你想要禁用/启用一个类的所有输入。例如。组_[a|b] 然后我给复选框控件一个类 group_ctrl 和一个名为 group (data-group) 的数据属性，以及它负责控制的相应组类作为值。您可以根据需要多次复制此模式。例如。 group_c, group_d, group_e...等等