Question

我在我的选择框中应用了优雅的Selectric JQuery plugin，但现在我无法通过选中或取消选中复选框来启用或禁用某个选择框。我注意到如果我删除了插件，下面的代码工作正常。如果插件已加载，则代码无效。

<div class="labels-chk">
    <input type="checkbox" id="chk2" class="css-checkbox" name="Message">
    <label for="chk2" class="css-label">Show notification message&nbsp;</label>
</div>

<select id="select-warnings" disabled>
    <option value="load">as soon as page has loaded</option>
    <option value="date">on date</option>
</select>

<script type="text/javascript">
    $(document).ready(function(){

        $('select').selectric();

        $("#chk2").click(function() {
            var checked_status = this.checked;
            if (checked_status == true) {
                $("#select-warnings").removeAttr("disabled");
            } else {
                $("#select-warnings").attr("disabled", "disabled");
            }
        });
     });
</script>

Answer 1

好的，我懂了！ Selectric必须刷新。

变化：

$("#select-warnings").removeAttr("disabled");

和

$("#select-warnings").attr("disabled", "disabled");

要：

$("#select-warnings").removeAttr("disabled").selectric('refresh');

和

$("#select-warnings").attr("disabled", "disabled").selectric('refresh');

Answer 2

更改选择状态后，您必须使用selectric refresh方法。

代码：

$('#dynamic').selectric();

$('#toggleDis').click(function (e) {
        if ($("#toggleDis").hasClass("disabled")) {
    $('#dynamic').prop('disabled', false);
}
else {
    $('#dynamic').prop('disabled', 'disabled');
}
    $(this).toggleClass('disabled');
    var Selectric = $('select').data('selectric');
    Selectric.refresh(); // Reconstruct the plugin options box
});

演示：http://jsfiddle.net/vcLz2seu/

Answer 3

禁用已应用的电气使用

$('select').selectric('destroy');

启用禁用Selectric选择框

3 个答案: