Response title
This is preview!
<select id="Select2" name="categoryFilter"> <option class="inactiveLabel" value="A" disabled="disabled">A</option> <option value="x">x</option> <option class="inactiveLabel" value="B" disabled="disabled">B</option> <option value="y">y</option> <option class="inactiveLabel" value="C" disabled="disabled">C</option> <option value="z">z</option> <option class="inactiveLabel" value="D" disabled="disabled">D</option> <option value="w">w</option> <option class="inactiveLabel" value="E" disabled="disabled">E</option> <option value="t">t</option> </select>
When I load the page in a browser, the jquery plugin adds a style="display: none;" property on the < select > tag and converts the above code to the below, which in turn shows up on the page:The problem is, the jQuery plugin that converts the code ignores the disabled="disabled" property on the < option > tags of the original code, so all tags end up being enabled. None of the original disabled="disabled" properties are reflected in the new code that's produced by the jQuery plugin and spit out on the page. How can I make sure certain option tags are disabled?<a class="ui-selectmenu ui-widget ui-state-default ui-selectmenu-dropdown inactiveLabel ui-state-active ui-corner-top" id="Select2-button" role="button" href="#" aria-haspopup="true" aria-owns="Select2-menu" style="width: 120px;"> <span class="ui-selectmenu-status">x</span> <span class="ui-selectmenu-icon ui-icon ui-icon-triangle-1-s"></span>
</a>
...<ul class="ui-selectmenu-menu ui-widget ui-widget-content ui-corner-bottom ui-selectmenu-menu-dropdown ui-selectmenu-open" aria-hidden="false" role="listbox" aria-labelledby="Select2-button" id="Select2-menu" style="width: 120px; top: 158px; left: 316px;" aria-activedescendant="ui-selectmenu-item-410"> <li role="presentation" class="inactiveLabel ui-selectmenu-item-selected"> <a href="#" tabindex="-1" role="option" aria-selected="true" id="ui-selectmenu-item-410">A</a> </li> <li role="presentation"> <a href="#" tabindex="-1" role="option" aria-selected="false">x</a> </li> <li role="presentation" class="inactiveLabel"> <a href="#" tabindex="-1" role="option" aria-selected="false">B</a> </li> <li role="presentation"> <a href="#" tabindex="-1" role="option" aria-selected="false">y</a> </li> <li role="presentation" class="inactiveLabel"> <a href="#" tabindex="-1" role="option" aria-selected="false">C</a> </li> <li role="presentation" class=""> <a href="#" tabindex="-1" role="option" aria-selected="false">z</a> </li> <li role="presentation" class="inactiveLabel"> <a href="#" tabindex="-1" role="option" aria-selected="false">D</a> </li> <li role="presentation"> <a href="#" tabindex="-1" role="option" aria-selected="false">w</a> </li> <li role="presentation" class="inactiveLabel"> <a href="#" tabindex="-1" role="option" aria-selected="false">E</a> </li> <li role="presentation" class="ui-corner-bottom"> <a href="#" tabindex="-1" role="option" aria-selected="false">t</a> </li>
</ul>
© 2013 jQuery Foundation
Sponsored by and others.