Enable or disable target element based on checkbox checked state

how to keep checkbox checked in html
how to keep checkbox checked even after page refresh
how to keep checkbox checked even after page refresh javascript
css disabled class
checkbox checked javascript
html checkbox value true/false
multiple processes can use the same file if visible checkbox is checked true or false
checkbox disabled css

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

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

Simply attach a method to checkbox's onclick handler:

function enableElement(id, enable) {
    onclick="enableElement('textform', this.checked)" 


<textarea id="textform" style="width:100%; height:200px" disabled>

:disabled, An element is disabled if it can't be activated (selected, clicked on, typed into, etc.​) or accept focus. The element also has an enabled state, in which it can be activated or accept focus. <input type="checkbox" id="billing-checkbox" checked> <br> <input Using the :target pseudo-class in selectors. The disabled property sets or returns whether a checkbox should be disabled, or not. A disabled element is unusable and un-clickable. Disabled elements are usually rendered in gray by default in browsers. This property reflects the HTML disabled attribute.

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

Using The HTML Checkbox & Managing The Check State With , Managing checkboxes in HTML, specifically using JavaScript and jQuery can A checkbox element can be placed onto a web page in a pre-checked fashion by This is when a form is posted directly to a target URL using form encoding. Of course this is just my opinion, but based on observation and  One is enabled and the other is disabled. The second disabled checkbox is our target checkbox which enables and disables based on the first checkbox. In jQuery, we check for a click event. When the first checkbox is clicked, then we get the value of the 1st checkbox. And in a if loop, we test when the value is equal to 1 then prop the disabled checkbox to enable.

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;

HTML DOM Input Checkbox disabled Property, Disabled elements are usually rendered in gray by default in browsers. Return Value: A Boolean, returns true if the checkbox is disabled, otherwise it returns  The good news is you can relate a checkbox's label to the checkbox, extending the actionable area the user can click or touch to toggle the check state. This is done by adding either a 'name' or 'id' attribute to the checkbox element and a corresponding 'for' attribute to the label.

Quick Tip: Persist Checkbox Checked State after Page Reload , James Hibbard demonstrates how to persist checkbox checked state (useful for Checked State if, for example, you use checkboxes to allow your users to the labels and check boxes inside block-level elements ( <div> elements in This allows me to target only those checkboxes I am interested in and  It might be useful to Persist Checkbox Checked State if, for example, you use checkboxes to allow your users to set site-specific preferences, such as opening external links in a new window or hiding certain page elements. For the impatient among you, there’s a demo of the technique at the end of the article.

The "Checkbox Hack" (and things you can do with it), So you can style an element completely differently depending on the state of that checkbox, which [type="checkbox"]:disabled:not(:checked) + label:before, Also Read: How to Enable or Disable Multiple Checkboxes Based on Dropdown Selection in AngularJS. What I want is when a user selects a value from the dropdown list, based on a certain condition the script (using JavaScript and jQuery) will enable or disable the checkboxes. Enable or Disable Checkboxes using JavaScript

Indeterminate Checkboxes, While checkboxes can only either submit their value (checked state) or not Checkbox inputs can only have two states: checked or unchecked. <p>Based on <a href="https://codepen.io/chriscoyier/pen/JYyXjX" Element.prototype.​closest = data-target="checkbox-family.child checkbox-family.default" When the CheckBox is clicked based on whether it is checked (selected) or unchecked (unselected), the TextBox will be enabled or disabled. Enable Disable TextBox on CheckBox click (checked unchecked) using JavaScript The HTML Markup consists of a CheckBox and a TextBox which is by default disabled using the disabled attribute.

  • did it work? If not, what occurred?
  • Where's the HTML?
  • Please be more detailed about your problem - with examples and what you did, so others can help you.
  • @Terry - Why remove the snippet?
  • Tako update your question
  • 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 !
  • 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.