basic javascript question about disabling buttons

4215 views javascript
3

I have a simple piece of javascript embedded into my html form, not a separate file, that is supposed to disable the submit form button until a certain checkbox has been checked but it doesn't seem to be working.

<script>
    var disclaimer = document.getElementById("disclaimer");
    var submitButton = document.getElementById("submit");

    submitButton.disabled = true;
    if (disclaimer.checked) {
        submitButton.disabled = false;
    }

 </script>

which I wrote and seems simple and effective but I'm not getting the results I'm looking for. After researching I see results such as

$('#check').click(function(){
if($(this).attr('checked') == false){
    $('#btncheck').attr("disabled","disabled");   
}
else
    $('#btncheck').removeAttr('disabled');
});

Now obviously the variable names and such are named differently but this doesn't even look remotely similar to the javascript code I've provided above and I'm having a hard time getting useful tips from the apparently working code below that does the same thing. Could someone break down the code segment below such that I might be able to fix my code above?

answered question

Im not sure if you are aware but the second code is jQuery (a javascript library). It really helps but you could still get the same result with plain javascript. What you are missing is event listeners.

4 Answers

6

The only significant difference between the 2 code samples you posted is that the second one wraps the button disabling in the click event.

First one says : Straight when page is loaded, if the checkbox is checked, enable the button. (hint: happens only once)

Second one says : For each click on the checkbox, if the checkbox is checked, enable the button.

Something like this should work (haven't tested) :

<script>
    var disclaimer = document.getElementById("disclaimer");
    var submitButton = document.getElementById("submit");

    function disableSubmitIfDisclaimerNotAccepted(){
        submitButton.disabled = true;
        if (disclaimer.checked) {
            submitButton.disabled = false;
        }

    }

    disclaimer.onclick = disableSubmitIfDisclaimerNotAccepted; // everytime the checkbox is clicked
    disableSubmitIfDisclaimerNotAccepted(); // on page load
</script>

posted this
2

Hope this will work for you

   $('#disclaimer').click(function(){
if($(this).attr('checked') == false){
    $('#submit').attr("disabled","disabled");   
}
else
    $('#submit').removeAttr('disabled');
});

Here if condition indicates the action which should be done if the disclaimer is not chcked. Button will be enable if the disclaimer is checked.

posted this
12

If you want jQuery, use prop (is not wrong to use attr too but I prefer prop instead). For checkbox, use change event instead of click. I'd do like:

$('#check').on("change", function(){
   var isChecked = $(this).is(':checked');
   $('#btncheck').prop("disabled", !isChecked); 
});

posted this
7

I believe you trying to find the solution in vanilla JavaScript.

You have to attach the event to the check element like the following way:

var disclaimer = document.getElementById("disclaimer");
document.getElementById("submit").disabled = true;
disclaimer.addEventListener('click', function(){
  var submitButton = document.getElementById("submit");
  submitButton.disabled = true;
  if (this.checked) {
      submitButton.disabled = false;
  }
});
<form>
  <input type="checkbox" id="disclaimer"/>
  <button id="submit">Submit</button>
</form>

posted this

Have an answer?

JD

Please login first before posting an answer.