Enable Submit Button When Select Checkbox

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

Solution 1:

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:

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

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

functionisChecked(checkbox, sub1) {
  // checkbox
}

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

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

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

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

Solution 2:

Here is the complete code

<pstyle="color: #FF0000; font-weight: bold;">I have read and agree to the terms and conditions
    <inputtype="checkbox"id="termsChkbx "onclick="change_button(this,'sub1')"/></p><p><inputtype="submit"name="submit"value="Order now!"id="sub1"disabled="disabled"/></p><scripttype = "text/javascript">functionchange_button(checkbx,button_id) {
    var btn = document.getElementById(button_id);
    if (checkbx.checked == true) {
        btn.disabled = "";
    } else {
        btn.disabled = "disabled";
    }
}
</script>

Solution 3:

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

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

PLUNKR

Solution 4:

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:

functionchecked(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.

Solution 5:

Try using this JQuery function

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

Example

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><pstyle="color: #FF0000; font-weight: bold;">I have read and agree to the terms and conditions
    			<inputtype="checkbox"id="termsChkbx" /></p><p><inputtype="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>