How to remove "disable" attribute for class "selectpicker" using jQuery

Question

How to remove select"disabled" attribute at 2nd Dropdown using jquery when 1st Dropdown is selected.

I have tried some solutions but not solve my problem. The solution that I have tried as below:

1) $('#xyz').prop("disabled", false);

2) $("#xyz").attr('disabled', true).trigger("liszt:updated");

Share my codes as below:

HTML

//This is 2nd Dropdown    
<select id="xyz" class="selectpicker form-control" multiple title="-- Select --" disabled>
       <option value="" disabled>-- Select --</option>
       <option value="A">A</option>                                     
       <option value="B">B</option>                                     
    </select>

JS

$("#1stdropdown").change(function() {       //This is 1st Dropdown      
    if ($("#1stdropdown").val() == "") {
        $("#btnSubmit").attr('disabled', true);
        $("#xyz").append($("<option>",{value: "",text: "-- Select --"}));
    }
    else {
        $("#btnSubmit").attr('disabled', false); 
        $("#xyz").removeAttr("disabled").prop("disabled", false);  // I am stuck here
    }
});

Answer 1

Try this:

$("#xyz").attr('disabled',true);

$('#xyz').selectpicker('refresh');

You should refresh the selectpicker after any updates in it.