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

使用sudo apt-get remove r-cran-rcpp sudo apt-get install r-cran-rcpp选择所有类别为querySelectorAll的元素（checkme）
遍历所有选定的元素并附加'.checkme[type="checkbox"]'侦听器
使用change和选择父tr元素选择使用this.parentNode.parentNode元素为input元素的child元素 tr（querySelector）
考虑'.text[type="text"]'元素的disabled属性 input

checked

＆＃13;

checkbox

＆＃13;

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

＆＃13;

Answer 2

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

Answer 3

您可以使用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>

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

3 个答案: