【问题标题】:Disable select2 dropdown with knockout binding?禁用带有敲除绑定的 select2 下拉菜单?
【发布时间】:2015-08-17 18:48:42
【问题描述】:

我有一个 MVC Razor 项目,在我看来,我有一个 Html.TextBoxFordata-bind="disable: setRoot"。这个input 被Select2 jquery 插件使用。 我的问题是 disable 绑定无法正常工作。 这是我的代码:

<div class="control-label">Category</div>
                    <div class="input-group">
                        <div class="input-group-addon"><label><input data-bind="checked: setRoot" type="checkbox"> root</label>
                        </div>
                        @Html.TextBoxFor(m => m.Create.IdCategory, new { id = "QuickSearchMainCategory", data_bind = "disable: setRoot, value: model.Create.IdCategory", @class = "form-control" })
                    </div>

还有我的 js:

self.setRoot = ko.observable(true);

            self.beRoot = ko.computed(function() {
                if (self.setRoot() === true) {
                    self.model.IdCategory(self.model.IdRootCategory());

                } else {
                    self.model.IdCategory(null);
                }
            });

$("#QuickSearchMainCategory").select2({
                placeholder: "Category search",
                minimumInputLength: 3,
                width: 'resolve',
                ajax: {
                    url: urlQuickSearchCategory,
                    contentType: 'application/json',
                    dataType: 'json',
                    type: 'POST',
                    traditional: true,
                    quietMillis: 400,
                    data: function(term, page) {
                        var data = {
                            term: term
                        };
                        return data;
                    },
                    results: function(data, page) {
                        return { results: data };
                    }
                },
                dropdownCssClass: "bigdrop",
                formatResult: function(item) { return item.id + " - " + item.label; },
                formatSelection: function(item) { return item.id + " - " + item.label; },
                escapeMarkup: function(m) { return m; }
            });

如果我检查 html,则禁用功能有效,但不适用于整个 select2 元素,而仅适用于 ID 为 QuickSearchMainCategory 的输入。 我需要做什么?

【问题讨论】:

    标签: javascript jquery asp.net-mvc razor knockout.js


    【解决方案1】:

    Select2 不适用于“禁用”绑定,因为您必须明确告诉 select2 使用其内置函数禁用自身。

    您必须使用此功能来禁用/启用它:

    $('#QuickSearchMainCategory').select2('disable');
    $('#QuickSearchMainCategory').select2('enable');
    

    您必须在您的 ko 视图模型中执行此操作,因为仅设置禁用的 HTML 属性是不够的。

    【讨论】:

    • 禁用 select2 时,该值不会发送到 mvc 帖子。怎么做?
    • Disabled 和具有 CSS 样式 display:none 的表单字段永远不会与 HttpPost 一起发送。只需启用该字段或在表单中使用隐藏的输入即可。
    • 我找到了怎么做,“禁用”或“启用”= false,所有这些都使 MVC 忽略该值。但是我使用了 .select2('readonly', true) 这使得该字段在屏幕上被禁用,但 MVC 收到了值!!
    猜你喜欢
    • 1970-01-01
    • 2013-01-14
    • 2016-04-13
    • 2016-12-31
    • 2021-10-06
    • 2017-08-14
    • 1970-01-01
    • 2021-10-14
    • 2016-04-27
    相关资源
    最近更新 更多