Enable textbox on click of checkbox in each table row

Question

I have jquery code. I want same think to do in javascript

//$('.checkme').attr('checked', true);
    $('.checkme').click(function(){
        if($('input[name='+ $(this).attr('value')+']').attr('disabled') == true){
            $('input[name='+ $(this).attr('value')+']').attr('disabled', false);
        }else{
            $('input[name='+ $(this).attr('value')+']').attr('disabled', true);
        }
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
    <tr>    
        
        <td>
            <input type="checkbox" name="sd3" value="mfi_nam9" class="checkme"/></td>  
            <td>First Value </td>
           <td > <input type="text" name="mfi_nam9" class="text required" id="mfi_name" disabled ></td>
        
    </tr>
    <tr>    
        
        <td>
            <input type="checkbox" name="sd2[]" value="mfi_nam8"  class="checkme" /></td>
            <td>Second Value </td>
            <td><input type="text" name="mfi_nam8" class="text required" id="mfi_name" disabled  >
        </td>
    </tr>
</table>

Rayon · Accepted Answer · 2016-04-28 08:24:56Z

4

Use querySelectorAll to select all elements having class as checkme ('.checkme[type="checkbox"]')
Loop through all the selected elements and attach change listener
Select the parent tr element using this.parentNode.parentNode and select input element which is child of tr element using querySelector('.text[type="text"]')
Manipulate disabled property of the input element considering checked property of the checkbox

[].forEach.call(document.querySelectorAll('.checkme[type="checkbox"]'), function(elem) {
  elem.addEventListener('change', function() {
    this.parentNode.parentNode.querySelector('.text[type="text"]').disabled = !this.checked;
  });
})

<table>
  <tr>
    <td>
      <input type="checkbox" name="sd3" value="mfi_nam9" class="checkme" />
    </td>
    <td>First Value</td>
    <td>
      <input type="text" name="mfi_nam9" class="text required" id="mfi_name" disabled>
    </td>
  </tr>
  <tr>
    <td>
      <input type="checkbox" name="sd2[]" value="mfi_nam8" class="checkme" />
    </td>
    <td>Second Value</td>
    <td>
      <input type="text" name="mfi_nam8" class="text required" id="mfi_name" disabled>
    </td>
  </tr>
</table>

edited Apr 28, 2016 at 8:24

answered Apr 28, 2016 at 8:12

Rayon

36.6k5 gold badges54 silver badges78 bronze badges

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

2 Comments

Mike Phils Over a year ago

thnx, if I want one or more text box in row, and want same functionality also happen when checkbox clicked. I have added new text box as 'class=text1' and added in querySelector but it is not enabling and disabling.

Rayon Over a year ago

querySelectorAll returns array-like nodeList...Loop the returned elements.. jsfiddle.net/rayon_1990/fbk86dek/1

Tuan-IT · Accepted Answer · 2016-04-28 08:22:01Z

0

try this following code: Jquery:

$(function(){
        $('.checkme').click(function(){
            if($('input[name='+ $(this).attr('value')+']').attr('disabled') == 'disabled'){
            $('input[name='+ $(this).attr('value')+']').attr('disabled', false);
        }else{
            $('input[name='+ $(this).attr('value')+']').attr('disabled', true);
        }
    });
    })

answered Apr 28, 2016 at 8:22

Tuan-IT

1311 silver badge11 bronze badges

Comments

Vijay Baskaran · Accepted Answer · 2016-04-28 08:54:41Z

You can use prop for enabling and disabling the input element

$('.checkme').click(function(){
 var element = $(this).closest('tr').find('input[type="text"]');
        if($(this).is(':checked'))     
      element.prop( "disabled", false );
    else
      element.prop( "disabled", true );
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
    <tr>    

        <td>
            <input type="checkbox" name="sd3" value="mfi_nam9" class="checkme"/></td>  
            <td>First Value </td>
           <td > <input type="text" name="mfi_nam9" class="text required" id="mfi_name" disabled ></td>

    </tr>
    <tr>    

        <td>
            <input type="checkbox" name="sd2[]" value="mfi_nam8" class="checkme" /></td>
            <td>Second Value </td>
            <td><input type="text" name="mfi_nam8" class="text required" id="mfi_name" disabled  >
        </td>
    </tr>
</table>

Collectives™ on Stack Overflow

Enable textbox on click of checkbox in each table row

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related