Jquery and dropdowns
Hello,
I have 2 dropdowns (main_cat and sub_cat)... the second one is disabled and should be enabled when the first one is changed.
When the first dropdown is changed, it enters (to prove this, I added this line alert('The option with value main_cat ' + $mainCat); and the alert shows correctly).
However, the problem comes with this line: jQuery("#sub_cat").prop("disabled", true); because it does nothing.
I checked the code in jsFiddle (jQuery 1.8.3) and it works perfectly, but when placing it in Classipress, it doesn't work.
I also tried with jQuery("#sub_cat").attr("disabled","disabled");
All the following code is in a child theme, in a new file that is called from wrapper.php.
Any ideas why it is not working or how can I make it work?
Here is the whole code:
HTML
HTML Code:
<?php wp_dropdown_categories('show_count=0&selected=-1&hierarchical=1&depth=1&hide_empty=0&exclude=1&show_option_none=Type&taxonomy='.APP_TAX_CAT.'&name=main_cat&id=main_cat');
?>
<select name="sub_cat" id="sub_cat" disabled="disabled">
<option selected="selected" disabled="disabled" value="none">Brand</option>
<option>Option 1</option>
<option>Option 2</option>
</select>
JQUERY
Code:
jQuery(function ($)
{
jQuery("#main_cat").change(function()
{
var $mainCat=$('#main_cat').val();
alert('The option with value main_cat ' + $mainCat); //this is to check that it is entering when main_cat is changed
$("#sub_cat").empty();
jQuery("#sub_cat").prop("disabled", true);
});
});
Thanks in advance.