JSFiddle - React, Tailwind, and code Playground

HTML

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

<div id="results"></div>

JavaScript

/*
In Chrome and Safari, option tags inherit the disabled property their parent select.  Therefore, $("select option:disabled"); returns ALL option tags if the select box is disabled, even though the disabled attribute of each option is not explicitly set.

In FF 2-3.6, IE 6-8, and Opera 10, option tags do not inherit the disabled property.

Given the HTML above, $("option:disabled").length returns 4 in Chrome and Safari, and 0 in FF, IE, and Opera.
*/

$(function(){
  
    var $select = $("select"),
        $results = $("#results");
    
    // chrome should report 4 disabled option tags
    $results.append('<div>' + count() + ' disabled options</div>');
    
    // enable the select
    $select.removeAttr("disabled");
    $results.append('<div>enabling select...</div>');
    
    // count the number of disabled options once more
    $results.append('<div>' + count() + ' disabled options</div>');
    
    
    function count(){
        return $select.find("option:disabled").length;
    }
    
});