javascript - 单击每个表行中的复选框启用文本框

Question

我有 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>

Answer 1

• 使用querySelectorAll选择所有类为checkme的元素 ('.checkme[type="checkbox"]')
• 循环遍历所有选定的元素并附加change监听器
• 使用 this.parentNode.parentNode 选择父 tr 元素并 使用以下命令选择 input 元素，该元素是 tr 元素的 child querySelector('.text[type="text"]')
• 考虑到 input 元素的 disabled 属性 checkbox 的 checked 属性

[].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>