javascript - jqueryの複数チェックボックスでテキストフィールドを有効にする

Question

前の質問のチェックボックスからオンロードを有効にして他の要素を表示する

OK、これらのどれも機能しなかったので、例ではなく実際のコードを表示する必要があります。私は例を使用してそれを私の問題に適用しようとしていましたが、あなたの解決策はどれも私の状況ではうまくいきませんでした.

ここにあります。$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 の 2 つの値があり、それらのオプションは有効または無効のいずれかであり、一貫性はありません。値が有効かどうかをphpでテストすると、値はチェックマークをチェックし、3つのボックスフィールドを有効にします。無効になっている場合は、チェック マークがオフになり、3 つのボックスがグレー表示されます。ユーザーは、チェックマークをオンにして (有効にする) 3 つのテキスト フィールドを表示するか、チェック マークをオフにして (無効にする) 3 つのフィールドをグレー表示にすることができます。

これは最終的に一番下の POST に移動し、フィールドのすべての値とチェック マークを mysql に送り返します。

私はこれを完璧に行うことができましたhttp://jsfiddle.net/MVGys/9/同じフォームに複数のチェックマークではなく、1つのチェックマークのみで。

Answer 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()etc 関数をより効果的かつ有意義に使用できます。

Answer 2

更新された回答

あなたが達成しようとしているように見えることを考えると、クラスとデータ属性を使用することが最も簡単で柔軟なソリューションになると思います。

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();
});

フィドル

クラスを無効/有効にするすべての入力を行いました。例 group_[a|b] 次に、チェックボックス コントロールに group_ctrl クラスと group (data-group) という名前のデータ属性を指定し、対応するグループ クラスを値として制御します。このパターンは、必要に応じて何度でも複製できます。たとえば、group_c、group_d、group_e... など。

Answer 3

最短:)

jsfiddle

$(document).ready(function () {
    $('input[type=checkbox]').change(function () {
         $(this).nextUntil('input[type=checkbox]').prop('disabled', !this.checked);
    }).change();
});

.nextUntil()

.prop()

Answer 4

私はあなたがこのようにしたいと思います：

<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>