2

I have multiple text fields that is disabled by default and I have one checkbox above them. I want that when you check this checkbox it will enable all text fields. 

**Checkbox** not checked            **Checkbox** checked
**input field** disabled            **input field** enabled
**input field** disabled            **input field** enabled
**input field** disabled            **input field** enabled
**input field** disabled            **input field** enabled
**input field** disabled            **input field** enabled
etc....

It need to fit this html structure:

<div class="large-4 columns">
   <label for="checkbox"><input type="checkbox" id="checkbox">co-applicant</label>

   <div class="large-12 columns">
      <input type="text" id="inputbox" required pattern="[a-zA-Z]+" placeholder="First name" disabled="disabled">
   </div>
   <div class="large-12 columns">
     <input type="text" id="inputbox" required pattern="[a-zA-Z]+" placeholder="Last name" disabled="disabled">
   </div>
   <div class="large-12 columns">
     <input type="email" id="inputbox" required placeholder="Email" disabled="disabled">
   </div>
</div>

I have looked up several examples but didn't get any of them to work. Also, the jquery code - where should I put it for it to work the best?

Thanks for the help!

yrstyre
  • 141
  • 3
  • 9

5 Answers5

3
$('#test').click(function() {
    $('input:text').attr('disabled',!(this.checked))
});

Demo1

Update for Email type:

In case if you are using different type',Select with input

$('#test').click(function() {
    $('input').attr('disabled',!(this.checked))
});

Demo2

Suresh Atta
  • 120,458
  • 37
  • 198
  • 307
0
$('#checkbox').click(function() { 
        $(".inputbox").prop("disabled",false);

});

"inputbox" is make it as class.

DEMO

Able Alias
  • 3,824
  • 11
  • 58
  • 87
  • Thanks for mentioning that it needed to be a class! I tried your answer but that didn't work. But I changed my own try of it for taking the input class instead and now it worked! – yrstyre Aug 27 '13 at 15:04
0
$('#checkbox').click(function() { 
        $("input:text").prop("disabled",false);
});
Deepak Biswal
  • 4,280
  • 2
  • 20
  • 37
0

You must have unique ID's. You can change all your multiple IDs to Classes instead.

Try this:

$('#checkbox').on('change', function() {
    if (this.checked) {
        $(this).closest('div').find('input').removeAttr("disabled");
    }
});

Demo here

Or, if you want to go by class (by changing your ID's to Class like in my demo under):

$('#checkbox').on('change', function() {
    if (this.checked) {
        $(this).closest('div').find('.inputbox').removeAttr("disabled");
    }
});

Demo here

Community
  • 1
  • 1
Sergio
  • 28,539
  • 11
  • 85
  • 132
0

Solved it! Changed the input id to be a class instead.

<div class="large-4 columns">
   <label for="checkbox"><input type="checkbox" id="checkbox">co-applicant</label>

   <div class="large-12 columns">
      <input type="text" class="inputbox" required pattern="[a-zA-Z]+" placeholder="First name" disabled="disabled">
   </div>
   <div class="large-12 columns">
     <input type="text" class="inputbox" required pattern="[a-zA-Z]+" placeholder="Last name" disabled="disabled">
   </div>
   <div class="large-12 columns">
     <input type="email" class="inputbox" required placeholder="Email" disabled="disabled">
   </div>
</div>

And the jquery: 

<script>
 $('#checkbox').change(function() {
      $('.inputbox').attr('disabled',!this.checked);
  });
</script>
yrstyre
  • 141
  • 3
  • 9