CODEWITHSUNDEEP
javascript
manosbar
manosbar

Reputation: 316

Change a bootstrap button from disabled to active based on checkbox

I want to use this checkbox function that I found here however in my existing page I use bootstrap button that have the following form.

  <p style="color: #FFFFFF">I have read and agree to the terms and conditions
  <input type="checkbox" id="termsChkbx " onclick="change_button(this,'sub1')"/>
  </p>
  <a class="btn btn-light btn-xl disabled" href="randomlink.com">Download Now</a>

What are the modifications I should make in the function or the button to turn it to enabled, after the user has clicked on the checkbox? PS: I include the referenced function below.

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

Upvotes: 1

Views: 2134

Answers (4)

mediabloke
mediabloke

Reputation: 23

To stop clicking, in addition to adding the disabled class, add this to your css:

pointer-events: none;

It won't stop people from tabbing to the button and hitting space or enter, but it will stop them from clicking

Upvotes: 0

AndrewL64
AndrewL64

Reputation: 16331

Just use checked to see if the checkbox is ticked or not and then add an id for your button as well so you can use the classList() JavaScript property to toggle the disable class name based on the status of the checkbox.

Also, avoid using inline scripts like onclick and use an event listener in your JavaScript itself like this:

let chkBox = document.getElementById("termsChkbx");
let btn = document.getElementById("someBtn");

chkBox.addEventListener("click", function() {
  if(this.checked == true) {
    btn.classList.remove("disabled");
  } else {
    btn.classList.add("disabled");
  }
});
body {background-color: #000 !important;}
<!-- Botstrap CSS File --><link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/><!-- Botstrap CSS File -->

<p>I have read and agree to the terms and conditions
  <input type="checkbox" id="termsChkbx"/>
</p>

<a id ="someBtn" class="btn btn-light btn-xl disabled" href="randomlink.com">Download Now</a>

JSFiddle with the above code: https://jsfiddle.net/AndrewL64/k3po4zfa/1/

Upvotes: 0

Nitheesh
Nitheesh

Reputation: 20016

Try sing a button like below. Wrap your <a> tag inside a <button> tag. Anchor tag does not have disabled property, but button have.

In order to disable the anchor tag, you have to clear the href manually.

function change_button(checkbx,button_id) {
    var btn = document.getElementById(button_id);
    if (checkbx.checked == true) {
        btn.disabled = false;
        btn.children[0].href = "randomlink.com";
    } else {
        btn.disabled = true;
        btn.children[0].href = "javascript: void(0)";
    }
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
  
  <p style="color: #FFFFFF">I have read and agree to the terms and conditions
<input type="checkbox" id="termsChkbx " onclick="change_button(this,'sub1')"/>
</p>
<button class="btn btn-light btn-xl" disabled id="sub1">
  <a>Download Now</a>
</button>

Upvotes: 1

ssc-hrep3
ssc-hrep3

Reputation: 16089

Here is a runnable example based on your code. I've adapted your example with the following things:

  • The <a> tag must be a <button> in order to disable it. The anchor tag does not have a disabled attribute.
  • The button must be initially disabled (therefore the added disabled attribute).
  • You are passing an ID as an argument to the function. This ID must be equal to the button's ID. So, I added it as an attribute to the button.
  • I've removed the disabled class from the button, as it is not necessary, when there is an attribute disabled.
  • The button must submit a form, so you can either wrap it in a <form> or use a JavaScript click listener on the button. I've used the 2nd option in the solution below.

function change_button(checkbx,button_id) {
  var btn = document.getElementById(button_id);
  if (checkbx.checked == true) {
    btn.disabled = "";
  } else {
    btn.disabled = "disabled";
  }
}

function submit() {
  window.location.href = 'https://www.google.com';
}
body {
  background: #555 !important;
  margin: 0;
  padding: 20px;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<p style="color: #FFFFFF">I have read and agree to the terms and conditions
  <input type="checkbox" id="termsChkbx" onclick="change_button(this, 'sub1')"/>
</p>
<button disabled id="sub1" class="btn btn-light btn-xl" onclick="submit()">Download Now</button>

Upvotes: 0

Related Questions