enabled and disabled text input on checkbox checked and unchecked

Question

i've checkbox and text input

What I need is to enable text input when i check the checkbox and to disable text input when i uncheck the checkbox

I'm using the following code but it do the reverse enable when unchecked / disable when checked so how to adjust it fit with my needs.

<input type="checkbox" id="yourBox">
<input type="text" id="yourText">
<script>
document.getElementById('yourBox').onchange = function() {
document.getElementById('yourText').enabled = this.checked;
};
</script>

any help ~ thanks

score 41 · Accepted Answer · edited Jun 16 '15 at 00:01

41

You just need to add a ! in front of this.checked.

Here's an example that shows the change:

document.getElementById('yourBox').onchange = function() {
    document.getElementById('yourText').disabled = !this.checked;
};

<input type="text" id="yourText" disabled />
<input type="checkbox" id="yourBox" />

edited Jun 16 '15 at 00:01

Kevin Brown-Silva

40,873
40
203
237

answered Feb 28 '13 at 16:11

Minko Gechev

25,304
9
61
68

You should also trigger this onload or add the correct default properties in the markup. – David Hellsing Feb 28 '13 at 16:13
In most circumstances you may also want to add the following line to clear the text area if the user unchecks the box after having entered text already: `document.getElementById('yourText').value = ''` – Michael Hall Aug 30 '17 at 01:13
and also make an entry in the textbox required if the checkbox is checked: `document.getElementById('yourText').required = this.checked;` – Michael Hall Aug 30 '17 at 01:20
I have tons of `input` and `select` which needs to be enabled or disabled with their respective checkbox, is there any way to write shorter code for this? – Abhishek Pandey Aug 23 '18 at 05:53
When I this this I get Property 'checked' does not exist on type 'GlobalEventHandlers' – Arturo Lozano Jan 07 '20 at 21:30

score 4 · Answer 2 · answered Feb 28 '13 at 16:17

4

A jQuery solution could be this one:

<script>
$('#yourBox').change(function() {
    $('yourText').attr('disabled',!this.checked)
});
</script>

It is the same as Minko's answer but I find it more elegant.

answered Feb 28 '13 at 16:17

Rayfloyd

273
3
17

Note that in jQuery, one should use `prop`, not `attr` to set the value of Boolean attributes. – Heretic Monkey Jun 15 '20 at 19:33

score 2 · Answer 3 · answered Feb 02 '20 at 19:17

2

Try it. If you use a label then add onmousedown to it

<form >
  <input type="text" id="yourText" disabled />
<input type="checkbox" id="yourBox" onmousedown="this.form.yourText.disabled=this.checked"/>
 </form>

answered Feb 02 '20 at 19:17

Yevgen Kharchenko

21
1

score 0 · Answer 4 · answered Nov 22 '17 at 16:16

A better solution could be:

var checkbox = document.querySelector("#yourBox");
var input = document.querySelector("#yourText");

var toogleInput = function(e){
  input.disabled = !e.target.checked;
};

toogleInput({target: checkbox});
checkbox.addEventListener("change", toogleInput);

<input type="checkbox" id="yourBox">
<input type="text" id="yourText">

score -1 · Answer 5 · answered Feb 09 '16 at 08:34

function createInput( chck ) {
    if( jQuery(chck).is(':checked') ) {
        jQuery('<input>', {
            type:"text",
            "name":"meta_enter[]",
            "class":"meta_enter"
        }).appendTo('p.checkable_options');
    }
    else {
        jQuery("input.meta_enter").attr('disabled','disabled');
    }        
}
createInput( chck );

<input type="radio" name="checkable" class="checkable" value="3" />
<input type="radio" name="checkable" class="checkable" value="4" onclick="createInput(this)" />

Note that in jQuery, one should use `prop`, not `attr` to set the value of Boolean attributes. — Heretic Monkey, Jun 15 '20 at 19:33

enabled and disabled text input on checkbox checked and unchecked

5 Answers5

Linked