Clever Geek Handbook

Disable / enable buttons with jQuery

I'm new to here and I have a simple (hopefully) problem. I am trying to figure out how to switch the classes on my Apply button when the end user clicks inside a form / element field.

Here's a demo testing page - http://www.iconpayment.com/test/Untitled-2.html

Also does the image matter as background or inline img src?

Thank!

Noel

+2


source to share


5 answers 


$('.button').click(function(event){
    $(this).removeClass('button').addClass('button-disabled');
});


+2


source


If you have more than one button with the same class name, it would be nice to refer to the id of the button when replacing the classes (using the same snippet as cpharmston):



$('#button-div').click(function(event){
    $(this).removeClass('button').addClass('button-disabled');
});
+1


source


... I am trying to figure out how the radio button classes are on my Apply button after the end user clicks inside a form field / element .

$('form > input').click(function() {
    $('#button-div').removeClass().addClass('button-disabled');
});

As a side note, for ease of use, it might be a good idea to re-enable the button if the blur form input event fires and nothing has been edited (ie the form was not dirty)).

+1


source


To answer your first question ...

Give all of your clickable form elements the "affectsApply" class, or alternatively just select them all via a selector (#formId input, #formId textbox, etc.).

then just use something like the following:

$(document).ready(function(){
  $('.affectsApply').click(function(){
    $(formElement).addClass('highlight');
  });
});
0


source


If you want to switch to and you can use toggle()

:

$(".toggleButton").toggle(
    function() {
        $(this).removeClass("enabled").addClass("disabled");
    },
    function() {
        $(this).removeClass("disabled").addClass("enabled");
    }
);

Of course, this doesn't track state in any way, so you may need a flag or something to track if needed.

An example is here: http://docs.jquery.com/Events/toggle

0


source






More articles:


All Articles