JQuery - enable 4 text-boxes at once if 1 checkbox is checked

Question

I have search before I post, but I only found questions and solutions that is showing ONE textbox if ONE checkbox is checked as in: jquery - show textbox when checkbox checked

But my form is different

<form method="post" action="actionhere">
<div id='clone_me'>
    <?php 
    for($i=1; $i<=5;$i++) {
        ?>
      <div>
        <span id="title">Line <?php echo $i;?></span>

        <input type='checkbox' name='ck_<?php echo $i;?>'/>
        <input type='text' class='tx<?php echo $i;?>' name='tx[<?php echo $i;?>][]'/>
        <input type='text' class='tx<?php echo $i;?>' name='tx[<?php echo $i;?>][]'/>
        <input type='text' class='tx<?php echo $i;?>' name='tx[<?php echo $i;?>][]'/>
        <input type='text' class='tx<?php echo $i;?>' name='tx[<?php echo $i;?>][]'/>
     </div>
    <?php } ?>
</div>
<input type='submit' name='submit' value='Submit'/>
<input type="button" value="Add row" class="addrow" />
</form>

<script>
$(document).ready(function() {
    $('.addrow').click(function(){                
       var n= $("#clone_me>div").length;
       var new_n=n+1;              
       var new_line= $('#clone_me div:first').clone().append();                
       $("span#title", new_line).text("Line "+new_n+" ");
      //since I clone the 1st <div> therefore the cloned id must be 'ck_1', so changed it to latest id      
   $("input#ck_1", new_line).attr("name", "ck_"+new_n);
   $("input#ck_1", new_line).attr("id", "ck_"+new_n);           
   $("input.tx1", new_line).attr("name", "tx["+new_n+"][]");
       $("input.tx1", new_line).attr("class", "tx"+new_n);
       new_line.appendTo('#clone_me');

    });
});
</script>

As you can see from the code, I have a form which by default will have 5 sets of 1-checkbox-4-textbox, and user is allowed to add new set by clicking 'add row' button (which jquery will do clone).

How can I make the 4 textbox enabled once the correspond checkbox is checked? I'm not using hide() or show(). I want the user knows the textbox are there, but is disabled until user tick the checkbox.

if ($("#ck_4").is(":checked")) {
            $("input#tx4).attr("readonly", false); //or enabled

I thought it will be something like that, but since user can dynamically add how many rows as he wants, how can I achieve it?

http://jsfiddle.net/aLw3T/2/

Can you setup a jsbin/fiddle ? – Patsy Issa Apr 03 '14 at 07:19 — Patsy Issa, Apr 03 '14 at 07:19
@PatsyIssa Hi i edited my post and post the jsfiddle link – user2960754 Apr 03 '14 at 08:07 — user2960754, Apr 03 '14 at 08:07

MaiKaY · Answer 1 · 2014-04-03T08:09:40.393

1

first give your checkbox a data attribute like this

<input type='checkbox' data-id="<?php echo $i;?>" name='ck_<?php echo $i;?>'/>

after this create following javascript code to handle your input/textarea fields

$(document).ready(function () {
    $('input[type="checkbox"]').click(function () {
        var self = $(this);
        var checkboxId = self.data('id');
        var checkboxChecked = self.is(":checked");

        /* jQuery < 1.9 */
        if (checkboxChecked) {
            $('.tx' + checkboxId).attr('disabled', 'disabled');
        } else {
            $('.tx' + checkboxId).removeAttr('disabled');
        }

        /* jQuery 1.9+ */
        $('.tx' + checkboxId).prop('disabled', checkboxChecked);
    });
});

edited Apr 03 '14 at 08:09

answered Apr 03 '14 at 07:26

MaiKaY

4,422
20
28

hi, what if I have multiple form inside 1 page? each form has similar format, but the checkbox id for each form is different. let's assume for form 1>ck_1|ck_2|ck_3, form2>ck2_1|ck2_2|etc – user2960754 Apr 03 '14 at 07:39
because of that you should be use this attribute `data-id=""` – MaiKaY Apr 03 '14 at 07:42
Hi, could you please check what I did wrong, i can't seem to make it work? I put it: http://jsfiddle.net/aLw3T/2/ – user2960754 Apr 03 '14 at 08:01
try this ;) because you use input fields, not textarea you must use "disable" atttribute http://jsfiddle.net/aLw3T/3/ – MaiKaY Apr 03 '14 at 08:08
hi thanks, but it doesn't work (or my clone code is wrong) for cloned objects...? – user2960754 Apr 03 '14 at 08:17
also, I actually want the textbox are disabled by default, and only enabled them if checkbox is ticked – user2960754 Apr 03 '14 at 08:18
here you go: http://jsfiddle.net/x4AA9/ fork of your fiddle. if you clone the html elements you have no events binded on them. i changed the code to use a delegated event on the form element. – slu Apr 03 '14 at 11:05

slu · Accepted Answer · 2014-04-03T12:34:22.203

0

As long as the input fields are siblings to the checkbox you can use following jquery code:

$(document).ready(function() {
  $('form').on('click', 'input[type=checkbox]', function(e) {
    var checkbox = $(this);
    checkbox.closest('.row').find('input[type=text]').prop('disabled',!checkbox.is(':checked')); 
  });
});

if you have multiple forms, change the selector used for binding of the click event.

e.g. $('form.my_form').on...

see example: http://codepen.io/lchngr/pen/zhasg/

edited Apr 03 '14 at 12:34

answered Apr 03 '14 at 08:23

slu

129
4

Hi thanks, it works as you said -if the fields are sibling, but is it impossible if some input field is inside a div tag after the checkbox? I have like, a checkbox-textbox-div-dropdownbox-end_div – user2960754 Apr 03 '14 at 08:37
also, the script work for those original rows, but it doesn't work for cloned object – user2960754 Apr 03 '14 at 08:39
i updated the pen. it can now handle input fields nested under divs – slu Apr 03 '14 at 11:16
hi, thanks. you'd better change the answer here so I can mark it as answer..? thanks! – user2960754 Apr 03 '14 at 12:27

JQuery - enable 4 text-boxes at once if 1 checkbox is checked

2 Answers2