如何使用jQuery在HTML中启用或禁用选择标签？

Question

How do you enable or disable a select tag after selecting an option from the first select tag in jQuery, but current version is not working.

$("select[name='selectALPHA']").change(function () {
    if ($("select[name='selectBRAVO'"].attr('enabled') == false {
      $("select[name='selectBRAVO']").attr('enabled', 'true');
    }
    else
    {
      $("select[name='selectBRAVO']").attr('enabled', 'false');
    }
});

Answer 1

.attr() expects a boolean.

$("select[name='selectBRAVO']").attr('disabled', false);

The code also contains syntax errors. Fixes:

var $bravo = $("select[name='selectBRAVO']");

$("select[name='selectALPHA']").change(function () {
    $bravo.attr('enabled', !$bravo.attr('enabled'));
});

Answer 2

You seem to want to toggle the value, in plain js:

var select = document.getElementsByName('selectBRAVO')[0];
select.disabled = !select.disabled;

I'm sure you can figure out the jQuery equivalent.

Edit

Here's one different to Matt's based on Reid's suggestion:

var select = $("select[name='selectBRAVO']")[0];
select.disabled = !select.disabled;

The old jQuery attr method mixed up HTML attributes and DOM properties rather badly. In the new version, attr deals only with HTML attributes, which is better. However, in the vast majority of cases, what programmers really want is the DOM property. That can be accessed directly, there is no need to call attr or getAttribute . Direct property access is (hugely) faster, less to type and easier to read.

Answer 3

We all know that a select element has an attribute of disabled :

<select disabled="disabled">
</select>

And to manipulate the value of an attribute using jQuery, As an example on http://api.jquery.com/attr/#attr2 :

$("button:gt(1)").attr("disabled","disabled");

You can do the same in select element:

$("select[name='selectALPHA']").change(function () {
    if ($("select[name='selectBRAVO'"].attr('disabled') == 'disabled'{
      $("select[name='selectBRAVO']").removeAttr('disabled');
    }
    else
    {
      $("select[name='selectBRAVO']").attr('disabled', 'disabled');
    }
});

Answer 4

I'm not so very sure what you are trying to achieve here but I think that this can help you :

$("select[name='select1']").change(function () {
    var jSelect2=$("select[name='select2']");

    if($(this).val()){
       jSelect2.removeAttr('disabled');
    }else{
       jSelect2.attr('disabled', 'disabled');
    }

});

See working example here : JSFiddle