jQuery 如果复选框被选中，则禁用文本框
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18521390/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Disable a textbox if checkbox is checked
提问by user2701646
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:
我有一个 HTML 表，其中每一行都有一个复选框和一个文本框。这里的想法是每次选中复选框时，文本框将被禁用。这是代码：
<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!!
你能帮我解决这个问题吗？此外，如果我取消选中复选框，我希望我的文本框重新启用。谢谢！！
回答by Mark
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/
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/
JSFiddle：http: //jsfiddle.net/markwylde/LCWVS/4/
回答by Jason P
Sticking with the inline event handler:
坚持使用内联事件处理程序：
function myFunction(chk) {
$(chk).closest('tr').find('.textbox').prop('disabled', chk.checked);
}
The jQuery way:
jQuery方式：
$('.Blocked').change(function() {
$(this).closest('tr').find('.textbox').prop('disabled', this.checked);
});
回答by user1193
Try:
尝试：
function myFunction(chk) {
document.getElementsByClassName("textbox")[0].disabled = chk.checked;
}
回答by Prashantm
<input type="text" name="dateFrom" id="t2" style="width:100px"/>
<input type="text" name="dateTo" id="text" style="width:100px"/>
<script>
$(document).ready(function () {
$('#check').change(function () {
$("#t2").attr("disabled", "disabled");
$("#text").attr("disabled", "disabled");
});
$('#check').click(function () {
if (!$(this).is(':checked')) {
$("#t2").removeAttr("disabled");
$("#text").removeAttr("disabled");
}
});
});
</script>
回答by Crouch
Try this it allows you to disable and enable a textbox, if you want to disable multiple textboxes change it to getElementsByClassName("textboxes") then give all your textfields that class name.
试试这个它允许你禁用和启用一个文本框，如果你想禁用多个文本框，请将其更改为 getElementsByClassName("textboxes") 然后为所有文本字段提供该类名称。
function disableElement()
{
textbox = document.getElementById("text");
if(textbox.disabled)
{
bunit.disabled=false;
}
else
{
bunit.disabled=true;
}
}
Then have a checkbox and a textfield with the the textfield called text
然后有一个复选框和一个文本字段，文本字段称为文本
<input type="checkbox" name="check" onclick="disableElement();">
<input type="text" id="text">
