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>





Add Comment

* Required information
1000

Comments

No comments yet. Be the first!

Most Viewed Articles (in Asp.net )

Severity Code Description Project File Line Suppression State Warning Found conflicts between different versions of the same dependent assembly.

HttpError is not found in Asp,net core project

Do we need to redeploy the webapp when appsettings.json change?s

Button that is only clickable when the checkbox is checked

Visual Basic .NET Vs Visual C# - (Differences)

Getting values from appsettings.json ASP.NET

Severity Code Description Project File Line Suppression State Error CS0103 The name 'Encoding' does not exist in the current context

Call an Action in a controller when user clicks a button in View

Development Mode in IIS for Asp.net projects

Pass the same model to multiple views within the same controller

Severity Code Description Project File Line Suppression State Error CS0103 The name 'JsonConvert' does not exist in the current context.

Passing a model globally to all Views in your Asp.net webapp

Severity Code Description Project File Line Suppression State Error CS1061 'string[]' does not contain a definition for 'Any' and no accessible extension method 'Any' accepting a first argument of type 'string[]' could be found (are you missing a using directive or an assembly reference?)

Pagination in ASP.net core application

Severity Code Description Project File Line Suppression State Error CS0308 The non-generic type 'List' cannot be used with type arguments.

Latest Articles (in Asp.net)

Things to note when changing a function to async in your controller

AmbiguousMatchException: The request matched multiple endpoints.

Call an Action in a controller when user clicks a button in View

Button that is only clickable when the checkbox is checked

Pass the same model to multiple views within the same controller

Severity Code Description Project File Line Suppression State Error CS0103 The name 'Encoding' does not exist in the current context

Severity Code Description Project File Line Suppression State Error CS0103 The name 'JsonConvert' does not exist in the current context.

Passing a model globally to all Views in your Asp.net webapp

Severity Code Description Project File Line Suppression State Error CS0246 The type or namespace name 'JToken' could not be found.

Severity Code Description Project File Line Suppression State Error CS0308 The non-generic type 'List' cannot be used with type arguments.

One client credential type required either: ClientSecret, Certificate, ClientAssertion or AppTokenProvider must be defined when creating a Confidential Client. Only specify one

Severity Code Description Project File Line Suppression State Warning Found conflicts between different versions of the same dependent assembly.

Severity Code Description Project File Line Suppression State Error CS1061 'string[]' does not contain a definition for 'Any' and no accessible extension method 'Any' accepting a first argument of type 'string[]' could be found (are you missing a using directive or an assembly reference?)

Pagination in ASP.net core application

Microsoft.Identity vs Microsoft.IdentityModel.Clients.ActiveDirectory

Related Tutorials

Things to note when changing a function to async in your controller

AmbiguousMatchException: The request matched multiple endpoints.

Call an Action in a controller when user clicks a button in View

Button that is only clickable when the checkbox is checked

Pass the same model to multiple views within the same controller

Severity Code Description Project File Line Suppression State Error CS0103 The name 'Encoding' does not exist in the current context

Severity Code Description Project File Line Suppression State Error CS0103 The name 'JsonConvert' does not exist in the current context.

Passing a model globally to all Views in your Asp.net webapp

Severity Code Description Project File Line Suppression State Error CS0246 The type or namespace name 'JToken' could not be found.

Severity Code Description Project File Line Suppression State Error CS0308 The non-generic type 'List' cannot be used with type arguments.

One client credential type required either: ClientSecret, Certificate, ClientAssertion or AppTokenProvider must be defined when creating a Confidential Client. Only specify one

Severity Code Description Project File Line Suppression State Warning Found conflicts between different versions of the same dependent assembly.

Severity Code Description Project File Line Suppression State Error CS1061 'string[]' does not contain a definition for 'Any' and no accessible extension method 'Any' accepting a first argument of type 'string[]' could be found (are you missing a using directive or an assembly reference?)

Pagination in ASP.net core application

Microsoft.Identity vs Microsoft.IdentityModel.Clients.ActiveDirectory