Development

How to disable a button in jQuery with Examples and code

Today I’m going to talk about the most needed condiction in jQuery, How to disable a button in jQuery or disable button jquery.
In this post, you can see 4 common example that I have shown the disable button in HTML, those functions we need almost every project.

Example 1: Angry to accept conditional checkbox

The first example is angry to accept checkbox with conditional enable and disable button. If someone checks the angry to accept checkbox then submit button will enable to click and if don’t select the checkbox button will disable automatically. For every example you must need to call jQuery, you can call jQuery form Google CDN libraries.

<!– HTML Code –>
<input type="checkbox" id="ctaggery" checked="checked">
<label for="ctaggery">I Accept Terms and Conditions</label>

<button id="ctSubmitbtn" class="ct-register-btn">Register</button>

//jQuery Code
jQuery(document).ready(function($) {

$('#ctaggery').change(function(){
if($(this).is(":not(:checked)")){
$('.ct-register-btn').attr("disabled","disabled");
} else if($(this).is(":checked")){
$('.ct-register-btn').removeAttr("disabled");
}
});

});

Example 2: if fields have Empty submit button will button disable

Easy conditional empty fields jQuery disable button. In a form, if anyone doesn’t field any fields or leave empty any fields then submit button will disable and if fill up all inputs then submit button will enable for register/submission.

<!– HTML Code –>
<form action="#" id="form_id">
<label for="name2">Name</label>
<input type="text" placeholder="Name" />

<label for="email2">Email</label>
<input type="text" placeholder="Email" />

<label for="phone2">Telephone</label>
<input type="text" placeholder="Phone" />

<input id="submit2" type="submit" value="Submit">
<button type="submit">Register</button>
</form>

// jQuery Code
jQuery(document).ready(function($) {

$('#form_id button[type=&amp;quot;submit&amp;quot;],#submit2').prop('disabled', true);

$('#form_id input').keyup(function() {
var disable = false;

$('#form_id input').each(function() {
if($(this).val() == '') { disable = true };
});

$('#form_id button[type=&amp;quot;submit&amp;quot;],#submit2').prop('disabled', disable);
});

});

Example 3: Conditional input Fields

Enable or disable a group of fields base on one field. Something like Yes or No, if YES then other will be able to select else NO then other fields will be disabled to select. You can use these many different ways to change the condition a little bit.

<!– HTML code –>
<form action="#" method="post" id="form">
<span>Enable / Disable Radio Buttons: </span>
<input type="radio" name="first" value="Enable" id="enable">
<label for="enable">Enable</label>
<input type="radio" name="first" value="Disable" id="disable" checked>
<label for="disable">Disable</label>

<label>Radio Buttons :</label>
<input type="radio" name="second" class="disable-btn" value="Radio 1">
<span class="disable-label">Radio 1</span>
<input type="radio" name="second" class="disable-btn" value="Radio 2">
<span class="disable-label">Radio 2</span>
<input type="radio" name="second" class="disable-btn" value="Radio 3">
<span class="disable-label">Radio 3</span>
</form>

// jQuery Code
jQuery(document).ready(function($) {
// By Default Disable radio button
$(".disable-btn").attr('disabled', true);
$(".disable-label").css('opacity', '.2'); // This for hidden element little bit
$("form input:radio").change(function() {
if ($(this).val() == "Disable") {
$(".disable-btn").attr('checked', false);
$(".disable-btn").attr('disabled', true);
$(".disable-label").css('opacity', '.2');
}
// Else Enable radio buttons.
else {
$(".disable-btn").attr('disabled', false);
$(".disable-label").css('opacity', '1');
}
});
});

Example 4: jQuery enable disable button

jQuery enable disable button with reset option. Something we need to disable the button jquery after the click and have an option to reset the button. For this condition have to use jquery prop disabled event.

<!– HTML code –>
<h1>Disable / Enable jQuery button</h1>

<button id='submit'>Submit</button>
<span id='submit-reset'>Click To Reset</span>

// jQuery Code
jQuery(document).ready(function($) {

$( '#submit' ).on('click', function(){
$( this ).prop("disabled", "disabled");
});

$( '#submit-reset' ).click(function() {
$( '#submit' ).prop("disabled", false);
});

});

To get more details about jQuery check my blog, you can visit W3school and jQuery official document page.

You can check this video if you want to learn more about jQuery in short time.

If you have any questions or better solutions please, leave a comment.

Leave a Reply

Your email address will not be published. Required fields are marked *

Post comment