如果选中复选框，则禁用文本框

Question

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

你能帮我吗？ 另外，如果取消选中复选框，则希望重新启用文本框。 谢谢！！

Answer 1

下面的内容对您有用吗？

$('.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/

压缩后，它看起来像：

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

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

Answer 2

坚持使用内联事件处理程序：

function myFunction(chk) {
    $(chk).closest('tr').find('.textbox').prop('disabled', chk.checked);
}

jQuery方式：

$('.Blocked').change(function() {
    $(this).closest('tr').find('.textbox').prop('disabled', this.checked);
});

Answer 3

尝试：

function myFunction(chk) {
    document.getElementsByClassName("textbox")[0].disabled = chk.checked;
}

Answer 4

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

Answer 5

尝试此操作，它允许您禁用和启用文本框，如果要禁用多个文本框，请将其更改为getElementsByClassName（“ textboxes”），然后为所有文本字段指定该类名。

function disableElement()
{
    textbox = document.getElementById("text");
    if(textbox.disabled)
    {    
        bunit.disabled=false;
    }
    else
    {
        bunit.disabled=true;
    }
}

然后有一个复选框和一个带有名为text的文本字段的文本字段

<input type="checkbox" name="check" onclick="disableElement();">
<input type="text" id="text">