Question

I am in need of help about jQuery and multi-array forms. My form is as follows:

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

Now, all text box fields are disabled by default. Upon checking the respective checkbox field, all text box fields on the same div will be active and if uncheck, will do the opposite. I am not pretty sure where to start, sorry. I will be using php to process the submitted data. Any help would be appreciated.

Answer 1

given the markup you can try

$(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:

if you are generating the form dynamically you can use it like

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