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 для обработки представленных данных.Любая помощь будет оценена.

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

ОБНОВЛЕНИЕ:

, если вы генерируетеФорма динамически вы можете использовать его как

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