How can I toggle disable on a select and its parent div and its neighbor button

Question

I have a function that toggles disables. I was using a simple select and the code was working perfectly fine. I had to replace the select with bootstrap select. I have this html being generated now.

<div class="btn-group bootstrap-select show-tick disabled form-control">
   <button type="button" class="btn dropdown-toggle disabled bs-placeholder btn-info" data-toggle="dropdown" role="button" data-id="ps0" tabindex="-1" aria-disabled="true" title="Nothing selected"><span class="filter-option pull-left">Nothing selected</span>&nbsp;<span class="bs-caret"><span class="caret"></span></span></button>
   <div class="dropdown-menu open" role="combobox">
      <ul class="dropdown-menu inner" role="listbox" aria-expanded="false">
         <li data-original-index="0"><a tabindex="0" class="" data-tokens="null" role="option" aria-disabled="false" aria-selected="false"><span class="text">Ali Zia</span><span class="glyphicon glyphicon-ok check-mark"></span></a></li>
         <li data-original-index="1"><a tabindex="0" class="" data-tokens="null" role="option" aria-disabled="false" aria-selected="false"><span class="text">Fahim Ali</span><span class="glyphicon glyphicon-ok check-mark"></span></a></li>
         <li data-original-index="2"><a tabindex="0" class="" data-tokens="null" role="option" aria-disabled="false" aria-selected="false"><span class="text">Aneeq Iftikhar</span><span class="glyphicon glyphicon-ok check-mark"></span></a></li>
      </ul>
   </div>
   <select multiple="" id="ps0" name="ps0[]" class="form-control selectpicker" tabindex="-98" disabled="">
      <option value="120">Ali Zia</option>
      <option value="122">Fahim Ali</option>
      <option value="123">Aneeq Iftikhar</option>
   </select>
</div>

Now I have the id of select ps0 but I want to toggle disable on the select, parent div and button as well.

This is my current code.

function toggleDisable(id) {
    var isDisabled = $('#ps' + id).is(':disabled');
    if (isDisabled) {
        $('#ps' + id).prop('disabled', false);
        // Add additional code here
    } else {
        $('#ps' + id).prop('disabled', true);
        // Add additional code here
    }
}

Add document code

var index3 = 0;
$("#add-doc").change(function () {
    var files = $(this)[0].files;
    for (var i = 0; i < files.length; i++) {
        var temp_html = "";
        temp_html += '<div class="full_div"><ul class="list-padding-none"><li>' + files[i].name + '<a href="javascript:void(0)" class="pull-right" onclick = "removeDoc(this , ' + index3 + ')">Remove</a></li></ul>';
        temp_html += '<input type="checkbox" name="pc' + index3 + '" onclick="toggleDisable(' + index3 + ');" /> Confidential';

        temp_html += '<select multiple id="ps' + index3 + '" name="ps' + index3 + '[]" class="form-control selectpicker" disabled>';
        pausecontent.forEach(function (element, index) {
            temp_html += '<option value="' + index + '">' + element + '</option>';
        });
        temp_html += '</select></div>';
        //console.log(temp_html);
        $('.add-doc-section').append(temp_html);
        index3++;
    }
    $('.selectpicker').selectpicker({
      style: 'btn-info',
      size: 4

    });

});

Answer 1

As per docs, you need to do refresh of the selectpicker

Simply Try

function toggleDisable(id) {
    var $element = $('#ps' + id);
    $element.prop('disabled', !$element.prop('disabled'));
    $element.toggleClass('disabled'); //for bootstrap
    $element.selectpicker('refresh'); //for bootstrap
}