单击每个表格行中的复选框时启用文本框

Enable textbox on click of checkbox in each table row

本文关键字：复选框 启用 文本 表格 单击      更新时间：2023-09-26

我有jquery代码。我想在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>

  • 使用 querySelectorAll 选择所有具有类的元素作为checkme( '.checkme[type="checkbox"]' (
  • 遍历所有选定元素并附加侦听器change
  • 使用this.parentNode.parentNode和选择父tr元素选择input元素tr child元素 querySelector ( '.text[type="text"]' (
  • 操作input元素disabled属性考虑 checked 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>

请尝试以下代码：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);
        }
    });
    })

您可以使用 prop 来启用和禁用输入元素 

$('.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>
相关文章：