jQuery and associative form, need help using enable and disable checkbox

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.

Rafay · Accepted Answer · 2012-02-05 15:14:08Z

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

edited Feb 5, 2012 at 15:14

answered Feb 5, 2012 at 13:31

Rafay

31.1k5 gold badges71 silver badges106 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Jade Ryan Ibarrola Over a year ago

checkbox gets disabled after unchecking.. sorry really not a good jquery coder.

Jade Ryan Ibarrola Over a year ago

thanks, both answers from 3nigma and dfsq worked well. I noticed that both answers was not working with jquery version 1.6.4.. i just updated my jquery and worked like a charm.

Jade Ryan Ibarrola Over a year ago

with the answer you gave, how can I possibly auto-number the clause[n][number] fields upon checking? getting the current auto-number from clause[n][number] if there is already set, and incrementing/decrementing the value?

dfsq · Accepted Answer · 2012-02-05 14:50:45Z

1

Take a look at this demo: http://jsfiddle.net/tAkGH/ And the script:

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

edited Feb 5, 2012 at 14:50

answered Feb 5, 2012 at 13:32

dfsq

193k26 gold badges244 silver badges261 bronze badges

2 Comments

Jade Ryan Ibarrola Over a year ago

sorry, but when i try on my actual form (dynamically created), nothing happens. but markup is likely the same.

Jade Ryan Ibarrola Over a year ago

finally got it to worked after I updated my jquery version (1.6.4) to 1.7.1. It seems not to work well with my previous jquery version. Thanks a lot!

Collectives™ on Stack Overflow

jQuery and associative form, need help using enable and disable checkbox

2 Answers 2

3 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related