jQuery - a little selector and code refactoring

This little tip should give an impression on how to refactor a small peace of jQuery code.

Imaging the following scenario. You want to click a button on a webpage and the click should disable all other click buttons on the page. Ok, easy going. But keep in mind there are some other button elements like input[type=button], input[type=reset], input[type=submit], button.

Let's start with the code:

$("#disableAll").on("click", function() {
    //get all buttons, of any kind but the one that was clicked
    var $buttons = $("input[type=button],input[type=reset],input[type=submit],button").not(this);
    $buttons.attr("disabled",true);
});

The code is ok and works as it should. But we can do better than using a selector like this...

$("#disableAll").on("click", function() {
    //get all buttons, of any kind but the one that was clicked
    var $buttons = $(":submit,:reset,:button").not(this);
    $buttons.attr("disabled",true);
});

The little change in the selector for the click button elements makes the code shorter an more elegant. But still we can do better... Let's chain the action of disabling to the selector

$("#disableAll").on("click", function() {
    //get all buttons, of any kind but the one that was clicked
    $(":submit,:reset,:button").not(this).attr("disabled",true);
});

It's an simple example but it demonstrates how your jQuery code can evolve in the right direction while developing.

HTH.