javascript - 如何在选择及其父 div 及其邻居按钮上切换禁用

Question

我有一个切换禁用的功能。我使用的是一个简单的选择，代码运行得非常好。我不得不用 Bootstrap 选择替换选择。我现在生成了这个 html。

<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>

现在我有了 select ps0 的 ID，但我还想在选择、父 div 和按钮上切换禁用。

这是我当前的代码。

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
    }
}

添加文档代码

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

根据 docs ，您需要刷新 selectpicker

简单尝试

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