Programming Tutorials

Button that is only clickable when the checkbox is checked

By: Niraj in Asp.net Tutorials on 2023-06-01  

To implement a checkbox and a button that is only clickable when the checkbox is checked, you can use JavaScript/jQuery. Here's an example of how you can achieve this:

<div id="summary">
  <h2>Summary</h2>
  <div>
    <label>
      <input type="checkbox" id="agreeCheckbox"> I agree
    </label>
  </div>
  <div>
    <button id="submitButton" disabled>Submit</button>
  </div>
</div>

In this example, we have a checkbox with the ID agreeCheckbox and a button with the ID submitButton. Initially, the button is disabled using the disabled attribute.

Next, you can add the following JavaScript/jQuery code to enable the button when the checkbox is checked:

$(document).ready(function() {
  $('#agreeCheckbox').on('change', function() {
    if ($(this).is(':checked')) {
      $('#submitButton').prop('disabled', false);
    } else {
      $('#submitButton').prop('disabled', true);
    }
  });
});

This code attaches an event listener to the checkbox's change event. When the checkbox is checked, it enables the button by removing the disabled attribute, and when the checkbox is unchecked, it disables the button by adding the disabled attribute.

You can place this JavaScript/jQuery code either within a <script> tag in your view or in a separate JavaScript file that is included in your view.

With this implementation, the user will only be able to click the button when they have checked the "I agree" checkbox.

Ensure that you have included the jQuery library in your project. You can add the following script tag in the head section of your HTML file or layout file:

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>