切换单选按钮时prop('disabled', true)无法禁用select控件问题

尝试切换单选按钮时，控制.key类的select控件禁用状态，但操作未生效。不过在$(document).ready()开头执行的$(".key").prop('disabled', true);能正常生效。相关代码如下：

HTML代码 #

<div class="card-body">
    @*Title*@
    <div class="form-group">
        <label>Title: </label>
        <div class="row">
            <div class="col-lg-6">
                <label class="option option-plain">
                    <span class="option-control">
                        <span class="radio">
                            <input type="radio" name="title_option" value="0" checked="checked" />
                            <span></span>
                        </span>
                    </span>
                    <span class="option-label">
                        <span class="option-head">
                            <span class="option-title">
                                Key Pair
                            </span>
                        </span>
                        <span class="option-body">
                            Description
                        </span>
                    </span>
                </label>
            </div>
            <div class="col-lg-6">
                <label class="option option option-plain">
                    <span class="option-control">
                        <span class="radio">
                            <input type="radio" name="title_option" value="1" />
                            <span></span>
                        </span>
                    </span>
                    <span class="option-label">
                        <span class="option-head">
                            <span class="option-title">
                                Key Pair
                            </span>
                        </span>
                        <span class="option-body">
                            Description
                        </span>
                    </span>
                </label>
            </div>
        </div>
    </div>
<div class="row">
        <div class="col-sm-6">
            <div class="form-group">
                <label>Signing Key: </label>
                <select class="selectpicker form-control key" title="key">
                    <option>Key</option>
                </select>
                <span class="description">Description</span>
            </div>
        </div>
        <div class="col-sm-6">
            <div class="form-group">
                <label>Encryption Key: </label>
                <select class="selectpicker form-control key" title="key">
                    <option>Key</option>
                </select>
                <span class="description">Description</span>
            </div>
        </div>
    </div>

JavaScript代码 #

$(document).ready(function () {
    $(".key").prop('disabled', true);
    $("input[type=radio][name=title_option]").change(function () {
        console.log($(this).val());
        if ($(this).val() == 0) {
            $(".key").prop('disabled', true);
        } else {
            $(".key").prop('disabled', false);
        }

    });
});

你的select控件使用了selectpicker类，这是Bootstrap Select插件生成的自定义下拉组件。直接通过prop()修改原生select的disabled属性后，插件不会自动同步更新UI状态，所以看起来操作没生效。而页面加载时的代码能生效，是因为插件初始化前就设置了原生属性，初始化时会读取这个状态。

修改JavaScript代码，在设置disabled属性后，调用Bootstrap Select的refresh方法，强制插件更新UI：

$(document).ready(function () {
    $(".key").prop('disabled', true).selectpicker('refresh');
    $("input[type=radio][name=title_option]").change(function () {
        console.log($(this).val());
        if ($(this).val() == 0) {
            $(".key").prop('disabled', true);
        } else {
            $(".key").prop('disabled', false);
        }
        // 调用refresh方法同步插件状态
        $(".key").selectpicker('refresh');
    });
});

内容的提问来源于stack exchange，提问作者Nicola Zreinh