How to disable/enable select field using jQuery?

javascript

functions

callbacks

responsive-design

byAnton Shumikhin·Feb 17, 2025

Meet the changing tides of user interface preferences by enabling/disabling a <select> field with jQuery using the .prop() method:

// Frustrate users with a disabled select field
$('#yourSelectField').prop('disabled', true);

// Sympathize and enable it back
$('#yourSelectField').prop('disabled', false);

The hook '#yourSelectField' should match your unique identifier or classy class assigned to your select field.

Handle your select field state efficiently

To streamline this condition changing, harnessing the power of functions is recommended. They keep your code DRY (Don't Repeat Yourself), maintainable, and readable.

// Hide and seek champion function:
function toggleSelectAccessibility() {
    $('#yourSelectField').prop('disabled', !$('#toggleCheckBox').is(":checked"));
}
// Our spy listening for checkbox state changes:
$('#toggleCheckBox').change(toggleSelectAccessibility);

Let's get interactive!

Follow this adventure with a checkbox that rules over your <select> field's destiny. Their relationship is monitored using .is(":checked"):

// When the king checkbox makes a decision,
$('#gatekeeper').change( function() {
    // The fate of the select field alters accordingly.
    $('#yourSelectField').prop('disabled', !$(this).is(":checked"));
});