jQueryと連想フォームは、有効化と無効化のチェックボックスを使用してヘルプが必要

Question

jQueryとマルチ配列フォームについての助けが必要です。私のフォームは次のようになります：

<form> 
<div class="box" style="border:1px #000 solid"> 
    <input type="checkbox" name="clause[3][chk]" class="clause_check"> 
    <input type="text" name="clause[3][number]" class="clause_number numericonly" maxlength="2" size="2" disabled="disabled"> 
    This is a clause with a text field <input class="clause_input" name="clause[3][field][-_transfer_charges_-]" disabled="disabled" type="text"> to be filled in. 
</div> 
<div class="box" style="border:1px #000 solid"> 
    <input type="checkbox" name="clause[2][chk]" class="clause_check"> 
    <input type="text" name="clause[2][number]" class="clause_number numericonly" maxlength="2" size="2" disabled="disabled"> 
    This is a clause without a text box to fill. 
</div> 
<div class="box" style="border:1px #000 solid"> 
    <input type="checkbox" name="clause[1][chk]" class="clause_check"> 
    <input type="text" name="clause[1][number]" class="clause_number numericonly" maxlength="2" size="2" disabled="disabled"> 
    Another clause with a 
    <input class="clause_input" name="clause[1][field][-_transfer_charges_-]" disabled="disabled" type="text"> 
    to be filled in. 
    <ol type="a"> 
     <li>This is a sub clause with a <input class="clause_input" name="clause[1][field][-_noc_charges_-]" disabled="disabled" type="text"></li> 
     <li>Last sub clause.</li> 
    </ol> 
</div> 
</form> 

すべてのテキストボックスフィールドは、デフォルトでは無効になっています。それぞれのチェックボックスフィールドをチェックすると、同じdivのすべてのテキストボックスフィールドがアクティブになり、チェックを外すとその逆が実行されます。私はどこから始めたらいいのか分かりません。私は、提出されたデータを処理するためにPHPを使用します。どんな助けもありがとう。あなたは動的にあなたが見てみましょう

$(document).on("change",":checkbox",function(e){ 
... 
// rest of the code remains the same 

Answer 1

このデモではhttp://jsfiddle.net/tAkGH/ スクリプト：

$('body').on('change', '.clause_check', function() { 
    $(this).closest('.box').find(':input:not(".clause_check")').prop('disabled', !$(this).is(':checked')); 
}) 

Answer 2

のようにそれを使用することができ、フォームを生成する場合

：あなたは

$(function(){ 

    $(":checkbox").on("change",function(e){ 

    if($(this).is(":checked")) 
     $(this).closest("div.box").find(":input").prop("disabled",false); 
    else 
    $(this).closest("div.box").find(":input:not(:checkbox)").prop("disabled",true);  
});  
}); 

DEMO

UPDATEを試すことができ、マークアップを与え