Disable a textbox if checkbox is checked

Question

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

Hint: This tells how to detect a check or uncheck on the checkbox http://stackoverflow.com/questions/8423217/jquery-checkbox-checked-state-changed-event. Or just read the "related" questions over on the right side of this page on the web. — Lee Meador, Aug 29 '13 at 21:44

Mark · Accepted Answer · 2013-08-29T22:03:55.633

4

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/

edited Aug 29 '13 at 22:03

answered Aug 29 '13 at 21:45

Mark

2,184
1
16
28

Would using an ID be better then looking at the class? – Automate This Aug 29 '13 at 21:46
1

Interesting. You set the attr true when 'isChecked' is true and false when 'isChecked' is false. The rest of those two lines is identical. (I do think your answer explains what is going on well.) – Lee Meador Aug 29 '13 at 21:47
1

Also, you should use `prop` instead of `attr` – Musa Aug 29 '13 at 21:49
nice.. in addition to disabling the textbox, would it be possible to set the text of the textbox to "0"? Thanks! – user2701646 Aug 29 '13 at 21:55
With `$(this).parents("tr:eq(0)").find(".textbox").val("0");` or using chaining for performance `.prop("disabled", isChecked).val("0"); ` – Mark Aug 29 '13 at 21:56

score 2 · Answer 2 · answered Aug 29 '13 at 21:48

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);
});

score 1 · Answer 3 · answered Aug 29 '13 at 21:48

1

Try:

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

answered Aug 29 '13 at 21:48

user1193

121
3

score 1 · Answer 4 · answered Dec 04 '13 at 12:07

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

score 0 · Answer 5 · answered Oct 07 '13 at 11:02

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

Disable a textbox if checkbox is checked

5 Answers5

Linked