Enable submit button when select checkbox

Question

I have try a few examples of enable the submit button when checkbox is selected but i'm getting nowhere. Below is one of my attempts, where the submit button is disabled until the checkbox is selected. Please let me know what am i missing.

function checked(sub1) {
  var myLayer = document.getElementById(sub1);
  var input = myLayer.childNodes[0];
  if (input.checked == true) {
    myLayer.disabled = "";
  } else {
    myLayer.disabled = "disabled";
  }
}

<p style="color: #FF0000; font-weight: bold;">I have read and agree to the terms and conditions
  <input type="checkbox" id="termsChkbx " onchange="checked('sub1')" />
</p>

<p>
  <input type="submit" name="submit" value="Order now!" id="sub1" disabled="disabled" />
</p>

Josh Crozier · Accepted Answer · 2015-11-28 16:39:06Z

Nobody has explained why your code isn't working.

For one, you aren't selecting the input checkbox element properly. It is not a child node of the button element. You could either get a reference to the checkbox by passing this in the onchange event, or you could pass the event object and access the checkbox element through the event.target property:

For example:

<input type="checkbox" id="termsChkbx " onchange="isChecked(this, 'sub1')" />

Then you can access a reference to the checkbox element that fired on the change event:

function isChecked(checkbox, sub1) {
  // checkbox
}

After changing a couple things, it would work as expected:

function isChecked(checkbox, sub1) {
    var button = document.getElementById(sub1);

    if (checkbox.checked === true) {
        button.disabled = "";
    } else {
        button.disabled = "disabled";
    }
}

However, you can simplify the code and rewrite it to:

Example Here

<input type="checkbox" id="termsChkbx " onchange="isChecked(this, 'sub1')" />

function isChecked(checkbox, sub1) {
    document.getElementById(sub1).disabled = !checkbox.checked;
}

As a side note, I would highly suggest using unobtrusive JavaScript and add an event listener to the element in order to avoid inline onchange events:

Example Here

document.getElementById('termsChkbx').addEventListener('click', function (e) {
  document.getElementById('sub1').disabled = !e.target.checked;
});

Furqan Aziz · Accepted Answer · 2015-11-28 16:31:20Z

2

Here is the complete code

<p style="color: #FF0000; font-weight: bold;">I have read and agree to the terms and conditions
    <input type="checkbox" id="termsChkbx " onclick="change_button(this,'sub1')"/>
</p>
<p><input type="submit" name="submit" value="Order now!" id="sub1" disabled="disabled"/></p>

<script type = "text/javascript">
function change_button(checkbx,button_id) {
    var btn = document.getElementById(button_id);
    if (checkbx.checked == true) {
        btn.disabled = "";
    } else {
        btn.disabled = "disabled";
    }
}
</script>

answered Nov 28, 2015 at 16:31

Furqan Aziz

1,1149 silver badges18 bronze badges

Comments

Anik Islam Abhi · Accepted Answer · 2015-11-28 16:31:37Z

2

Try like this

<input type="checkbox" id="termsChkbx " onchange="isChecked(this,'sub1')"/></p>
 <p><input type="submit" name="submit" value="Order now!" id="sub1" disabled="disabled"/></p>

JS

function isChecked(chk,sub1) {
    var myLayer = document.getElementById(sub1);
    if (chk.checked == true) {
        myLayer.disabled = false;
    } else {
        myLayer.disabled = true;
    };
}

PLUNKR

edited Nov 28, 2015 at 16:31

answered Nov 28, 2015 at 16:22

Anik Islam Abhi

25.4k8 gold badges61 silver badges82 bronze badges

Comments

Axel · Accepted Answer · 2015-11-28 16:51:03Z

0

The major problem can be easily checked by using the browser's debug console. There you can immediately see an exception.

Try this:

Html:

<p style="color: #FF0000; font-weight: bold;">I have read and agree to the terms and conditions
    <input type="checkbox" id="termsChkbx" onchange="checked('sub1', this.checked);" />
</p>
<p>
    <input type="submit" name="submit" value="Order now!" id="sub1" disabled="disabled" />
</p>

JavaScript:

function checked(sub1, checkedState) {
    document.getElementById(sub1, this).disabled = !checkedState;
}

But be aware, that this code snippet is not best practice. It just solves your current problem without using libraries like jQuery.

edited Nov 28, 2015 at 16:51

answered Nov 28, 2015 at 16:42

Axel

4354 silver badges4 bronze badges

Comments

Collins Abitekaniza · Accepted Answer · 2015-11-28 16:58:49Z

Try using this JQuery function

$(function() {
    $('#termsChkbx').click(function() {
        if ($(this).is(':checked')) {
            $('#sub1').removeAttr('disabled');
        } else {
            $('#sub1').attr('disabled', 'disabled');
        }
    });
});

Example

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p style="color: #FF0000; font-weight: bold;">I have read and agree to the terms and conditions
    			<input type="checkbox" id="termsChkbx" /></p>
    
    			<p><input type="submit" name="submit" value="Order now!" id="sub1" disabled="disabled"/></p>
<script>
$(function() {
    $('#termsChkbx').click(function() {
        if ($(this).is(':checked')) {
            $('#sub1').removeAttr('disabled');
        } else {
            $('#sub1').attr('disabled', 'disabled');
        }
    });
});
</script>

jaunt · Accepted Answer · 2015-11-29 20:14:32Z

While your problem has been solved, there is no need for JavaScript here. This can be done with pure CSS/HTML:

input[type="checkbox"]:not(:checked) ~ input[type="submit"]{
  pointer-events: none;
  tab-index: -1;
  color: graytext;
}

<input type="checkbox"/>
<input type="submit" id="submit" value="submit" onclick="this.value='clicked';"/>

I've used the :not() pseudo-class to detect when a check-box isn't ticked as this is w3c's recommended approach. I wasn't sure where (in HTML) the check box is in relevance to the button, so I used the tilde (~ general sibling selector) to find the button. If the check-box is immediately before the button I would recommend using the adjacent sibling selector + instead.

However if you have multiple check-boxes and you only want one check-box to toggle the button's state then using the :nth-of-type pseudo class or an id may be more appropriate:

input[type="checkbox"]:nth-of-type(2):not(:checked) ~ input[type="submit"]{
  pointer-events: none;
  tab-index: -1;
  color: graytext;
}

<input type="checkbox"/>
<input type="checkbox"/>
<input type="checkbox"/>
<input type="submit" id="submit" value="submit" onclick="this.value='clicked';"/>

Otherwise all the check-boxes will be 'required' for the button to become click-able:

input[type="checkbox"]:not(:checked) ~ input[type="submit"]{
  pointer-events: none;
  tab-index: -1;
  color: graytext;
}

<input type="checkbox"/>
<input type="checkbox"/>
<input type="checkbox"/>
<input type="submit" id="submit" value="submit" onclick="this.value='clicked';"/>

Collectives™ on Stack Overflow

Enable submit button when select checkbox

6 Answers 6

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related