如果選中復選框，則禁用文本框

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