Enable or disable target element based on checkbox checked state

Question

i'm basically JavaScript newbie and I'm trying to resolve this problem of mine for quite a while. So,i'm doing JS school project and I need to make connection between checkbox and text form. If checkbox is not checked, text form should be disabled and vice versa. This is piece of code I have written:

function cbtf() {
    if (document.getElementById('checkbox').checked==false) {
        document.getElementById('textform').disabled=true;
    }
}

Can anyone write a new code ? That would be much of a help.

Please be more detailed about your problem - with examples and what you did, so others can help you. — Tomas Eglinskas
– Tomas Eglinskas, Commented May 12, 2018 at 20:20

num8er · Accepted Answer · 2018-05-12 20:30:34Z

1

Simply attach a method to checkbox's onclick handler:

function enableElement(id, enable) {
    document.getElementById(id).disabled=!enable;
}

<label>
  <input 
    type="checkbox" 
    onclick="enableElement('textform', this.checked)" 
  />
  ENABLE
</label> 

<br/>

<textarea id="textform" style="width:100%; height:200px" disabled>
  THIS IS TEXTAREA WITH ID "textform"
</textarea>

or another simplification without creating special one-liner method - just define Your will directy in onclick event:

<label>
  <input 
    type="checkbox"
    onclick="document.getElementById('textform').disabled = !this.checked" 
  />
  ENABLE
</label> 

<br/>

<textarea id="textform" style="width:100%; height:200px" disabled>
  THIS IS TEXTAREA WITH ID "textform"
</textarea>

edited May 12, 2018 at 20:30

answered May 12, 2018 at 20:27

num8er

19.5k4 gold badges50 silver badges61 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Tako Avdović Over a year ago

That worked num8er,thank u so much <3 ! Thank you guys for help! Bear in mind that this is my first question on this site and sorry for stupidity on certain things !

user7148391 · Accepted Answer · 2018-05-12 20:30:25Z

0

You can add a click event to the checkbox, and assign it's check state to the disabled property of the TextBox.

document.querySelector('input[type=checkbox]').onclick = function(e) {
  document.querySelector('input[type=text]').disabled = e.target.checked;
};

<input type="checkbox" name="">
<input type="text" name="">

answered May 12, 2018 at 20:30

user7148391

Comments

fixatd · Accepted Answer · 2018-05-12 20:32:29Z

0

You won't get that to work unless you attach an event to the checkbox, so I would suggest something like this:

var textbox = document.getElementById('textform');
var checkbox = document.getElementById('checkbox');

checkbox.addEventListener("change", function() {
    if (checkbox.checked) {
        textbox.disabled = false;
    } else {
        textbox.disabled = true;
    }
})

edited May 12, 2018 at 20:32

answered May 12, 2018 at 20:24

fixatd

1,4041 gold badge13 silver badges22 bronze badges

1 Comment

Terry Over a year ago

Probably want to listen to the input or change event ;) also, if the checkbox is going to be a toggle, then you need to add an else statement to (which re-enables the textbox) if it is unchecked.

Collectives™ on Stack Overflow

Enable or disable target element based on checkbox checked state

3 Answers 3

1 Comment

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related