I'm currently working on creating a disabled/enable button style using jQuery.
You can check out my demonstration page on Codepen for reference.
In the demo, you'll notice a blue submit button. When you input text into the field, the button becomes active.
I'd like to implement a feature where the button turns red when disabled and blue when enabled.
I've created CSS styles for .enableOnInput and .red.
.enableOnInput {
/* CSS properties */
}
.red {
/* CSS properties */
}
Below is the jQuery code for enabling/disabling the button:
$(function(){
$('#searchInput, #searchInput2').keyup(function(){
if ($(this).val() == '') {
// Disable the button if no text is entered
$('.enableOnInput').attr('disabled', 'true');
$(".aa").show();
$(".bb").hide();
} else {
// Enable the button if there is text
$('.enableOnInput').attr('disabled', false);
$(".aa").hide();
$(".bb").show();
}
});
});