Any field change in form, disable button, and activate another

I have JavaScript code that activates a button and deactivates another if a select is changed.

HTML

     choose
     1
     2
     3                

JavaScript

$('select').change(function () {
    var op = $(this).val();
    if (op != '') {
        $('input[name="refresh"]').prop('disabled', false);
    } else {
        $('input[name="refresh"]').prop('disabled', true);
    }
});
$('select').change(function () {
    var op = $(this).val();
    if (op != '') {
        $('input[name="add"]').prop('disabled', true);
    } else {
        $('input[name="add"]').prop('disabled', false);
    }
});

I need to expand the function to all fields in the form with minimal code. I could use the same code for the rest of inputs, but the code will be very long. I'm looking for a short version.

Targetting elements

$('select') is generic selector and will select all ` elements on the page. There might be some elements which are not needed to target for this functionality.

You can target only required elements using

-
Unique parent selector + descendant selector

In this, there will be a main container element and using this all the descendant elements can be targeted.

Example:

HTML:

    
        ...
    
    
    

    
        ...
    
    
    

    ...

JavaScript:

$('#container select').change(function() {

-
Using common class
Sometimes, adding all the elements under a container is not possible. In such cases, adding a common class to all the elements will allow to select elements using class selector.

$('.someCommonClass').change(function() {

Common attributes can also be added and selected using Attribute Equals Selector [name=”value”]. However, this can be slower than class selectors.

Similarly, another common + unique class should be applied to buttons.

Then, to disable/enable these buttons, they can be referenced.

HTML5 data-* attributes

HTML5's custom data-* attribute can be used to store custom data on HTML elements.

Getting data-* attribute value

jQuery provides data(name) method to get the value of the data-name attribute value. Core JavaScript has dataset property that allows access to data attributes.

$('elemSelector').data('key')

Using prop() with value

prop() accepts second parameter which will be converted to Boolean internally and depending on the value, the action will be taken. So, the if and else statements in the question can be combined as

$('elemSelector').prop('disabled', booleanValueHere);

If second parameter is truthy, element will be disabled. If falsy then element will be enabled.

Putting it all together



// Bind change event on all select elements
// having unique class
$('select.unique').change(function () {
// Cache this
var $this = $(this);

// Get the data-* attribute values
var button1 = $this.data('button1'),
button2 = $this.data('button2');

// Get the value of this select box
// Use this as second parameter to prop
$('input[name="' + button1 + '"]').prop('disabled', this.value);
$('input[name="' + button2 + '"]').prop('disabled', !this.value);
});
/ For Demo Purpose /
input {
color: green;
font-weight: bold;
}
input:disabled {
color: gray;
opacity: .5;
}


choose
1
2
3

choose
10
20
30





Conclusion

Now, the JavaScript code don't have to be written again for each new select` element. Just adding the markup with required attributes will automatically work. The relation between HTML element-JavaScript handler is reduced from many to many to many to one.

StackExchange Code Review Q#140748, answer score: 2