如果复选框被选中，则禁用文本框 [英] Disable a textbox if checkbox is checked

问题描述

我有一个HTML表格，每行中有一个checbox和一个文本框。这里的想法是每次选中复选框时，文本框都将被禁用。这里是代码：

 < table> 
< tr> 
< td> Value1< / td> 
< td> Value2< / td> 
< td>< input type =textclass =textbox/>< / td> 
< td>< input type =checkboxclass =Blockedonclick =myFunction（this）/>< / td> 
< / tr> 
< / table> 
 
 
< script src =/ Scripts / jquery-1.7.1.js>< / script> 
< script type =text / javascript> 
函数myFunction（chk）{
 //在这里禁用文本框
} 
< / script> 
  

你能帮我解决吗？另外，如果我取消选中checbox，我希望我的文本框被启用。谢谢!!

解决方案

下面的内容适合您吗？

<$ $（$。$ Block $'）。change（function（）{
var isChecked = this.checked;

if（isChecked）{
$（this）.parents（tr：eq（0））。find（。textbox）。prop（disabled，true）;
} else {
$（this ）.parents（tr：eq（0））。find（。textbox）。prop（disabled，false）;
}

}）;

JSFiddle： http://jsfiddle.net/markwylde/LCWVS/6/

压缩后，它看起来有点像：

  $（'。Blocked'）。change（function（）{
 $（this）.parents（tr ：eq（0））。find（。textbox）。prop（disabled，this.checked）; 
}）; 
  

JSFiddle： http://jsfiddle.net/markwylde/LCWVS/4/

I have an HTML table where there is a checbox and a textbox in everyrow. The idea here is every time a checkbox is checked, the textbox will be disabled. Here is the code:

 <table>
    <tr>
    <td>Value1</td>
    <td>Value2</td>
    <td><input type="text" class="textbox" /></td>
    <td><input type="checkbox" class="Blocked" onclick="myFunction(this)"/></td>
    </tr>
    </table>


<script src="/Scripts/jquery-1.7.1.js"></script>
    <script type="text/javascript">
        function myFunction(chk) {
             //disable the textbox here
        }
    </script>

Can you help me with this? Also, if I unchecked the checbox, I want my textbox to be enabled back. Thanks!!

解决方案

Would something like below work for you?

$('.Blocked').change( function() {
    var isChecked = this.checked;

    if(isChecked) {
        $(this).parents("tr:eq(0)").find(".textbox").prop("disabled",true); 
    } else {
        $(this).parents("tr:eq(0)").find(".textbox").prop("disabled",false);
    }

});

JSFiddle: http://jsfiddle.net/markwylde/LCWVS/6/

Compacted, it would look a little like:

$('.Blocked').change( function() {
    $(this).parents("tr:eq(0)").find(".textbox").prop("disabled", this.checked); 
});

JSFiddle: http://jsfiddle.net/markwylde/LCWVS/4/

这篇关于如果复选框被选中，则禁用文本框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！