CODEWITHSUNDEEP
javascripthtml
Mike Phils
Mike Phils

Reputation: 3505

Enable textbox on click of checkbox in each table row

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>

Upvotes: 2

Views: 2683

Answers (3)

Vijay Baskaran
Vijay Baskaran

Reputation: 939

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>

Upvotes: 0

Rayon
Rayon

Reputation: 36609

  • 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>

Upvotes: 4

Tuan-IT
Tuan-IT

Reputation: 131

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);
        }
    });
    })

Upvotes: 0

Related Questions