CODEWITHSUNDEEP
jquery
p3ac3
p3ac3

Reputation: 161

How to disable text box when checkox is checked in jquery

I have check box array and 2 groups of text box array like this. 

//CHECKBOXES
<div class="checkbox">
<input type="checkbox" value="male" name="sex[0]">
<input type="checkbox" value="female" name="sex[1]">
<input type="checkbox" value="others" name="sex[2]">
</div>

//TEXTBOXES1
<input type="text" name="numberofheads[0]" disabled="true">
<input type="text" name="numberofheads[1]" disabled="true">
<input type="text" name="numberofheads[2]" disabled="true">

//TEXTBOXES2
<input type="text" name="average[0]" disabled="true">
<input type="text" name="average[1]" disabled="true">
<input type="text" name="average[2]" disabled="true">

If I check male sex, all the text box that has 0 key will be enabled, and if unchecked, it will be disabled again. is it possible to do this in jquery? if it does please help me.. thanks!

Upvotes: 0

Views: 132

Answers (2)

Mr7-itsurdeveloper
Mr7-itsurdeveloper

Reputation: 1631

Try This:

 //or $("input[type='checkbox']") use this 

$('[name="sex[0]"],[name="sex[1]"],[name="sex[2]"]').click(function(){
        var numberval = $(this).index();

 if($(this).is(':checked'))
  { 

  $("input[name='average["+numberval+"]'],input[name='numberofheads["+numberval+"]']").removeAttr('disabled');

   }   

  else
  {
          $("input[name='numberofheads["+numberval+"]'],input[name='average["+numberval+"]']").attr('disabled',true);

   }

  });

http://jsfiddle.net/1wc6wwr8/2/

Upvotes: 0

dizel3d
dizel3d

Reputation: 3669

Take it http://jsfiddle.net/df6qjf2j/.

$(function() {
    $('[type="checkbox"]').on('change', function() {
        var isChecked = $(this).is(':checked');
        var number = $(this).index();
        $('[name="numberofheads[' + number + ']"]').attr('disabled', !isChecked);
        $('[name="average[' + number + ']"]').attr('disabled', !isChecked);
    });
});

Upvotes: 2

Related Questions