Disable a textbox if checkbox is checked

问题:

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

回答1:

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/

回答2:

Sticking with the inline event handler:

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

The jQuery way:

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

回答3:

Try:

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

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

回答5:

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.

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