如何从客户端禁用 DevExpress MVC 组合框（JS / JQuery）答案

【问题标题】：How to disable a DevExpress MVC combobox from the client (JS / JQuery)如何从客户端禁用 DevExpress MVC 组合框（JS / JQuery）
【发布时间】：2012-03-09 18:59:48
【问题描述】：

我正在尝试禁用基于事件的表单。我有一个 JQuery 脚本，它将禁用表/div 等的所有输入。但是 DevExpress 组合框仍然允许用户选择一个选项。控件的输入部分显示为已禁用，但选择按钮和下拉菜单仍然可用。

作为 DevExpress 客户端 API 和 Jquery 的新手，我的问题是：如何以跨浏览器兼容的方式使用 JQuery 将控件设置为禁用？

这是我目前拥有的

// jQuery 代码

// Disable all input types in the table
$('#addressTable :input').attr('disabled', true);

// Disable DevExpress MVC Combobox  **(Fails)**
$('#StateProvinceType.StateProvinceTypeId').SetEnabled(false);

//HTML扩展代码

@Html.DevExpress().ComboBox(settings =>
{
   settings.Properties.DropDownStyle = DropDownStyle.DropDown;
   settings.Name = "StateProvinceType.StateProvinceTypeId";
   settings.Properties.ValueType = typeof(int);
}).BindList(Model.States).GetHtml()

【问题讨论】：

使用 Name 属性直接访问客户端编程对象（不是 ID 选择器）

标签： jquery asp.net-mvc devexpress

【解决方案1】：

当 Name / ClientInstanceName 属性用点分隔时，需要通过“ASPxClientControl.GetControlCollection( ).GetByName()" 方法（由于 JavaScript 细节）。不要忘记启用客户端 API：

@Html.DevExpress().ComboBox(settings => {
    settings.Name = "StateProvinceType.StateProvinceTypeId";

    settings.Properties.Items.Add("1", "1");
    settings.Properties.Items.Add("2", "2");
    settings.Properties.Items.Add("3", "3");

    settings.Properties.EnableClientSideAPI = true;
}).GetHtml()

<input type="button" onclick="OnClick();" value="Toggle" />

<script type="text/javascript">
    var enabled = true;

    function OnClick() {
        var comboBox = ASPxClientControl.GetControlCollection().GetByName("StateProvinceType.StateProvinceTypeId");
        comboBox.SetEnabled(!enabled);
        enabled = !enabled;
    }
</script>

否则，客户端编程对象在全局上下文中直接可用：

@Html.DevExpress().ComboBox(settings => {
    settings.Name = "comboBox";

    settings.Properties.Items.Add("1", "1");
    settings.Properties.Items.Add("2", "2");
    settings.Properties.Items.Add("3", "3");

    settings.Properties.EnableClientSideAPI = true;
}).GetHtml()

<input type="button" onclick="OnClick();" value="Toggle" />

<script type="text/javascript">
    var enabled = true;

    function OnClick() {
        comboBox.SetEnabled(!enabled);
        enabled = !enabled;
    }
</script>

【讨论】：

这行得通，正是我所需要的。我也很欣赏简单对象和复杂对象之间的区别，以及精心制定和书面的回复，谢谢。

【解决方案2】：

当 id 有一个点时，你需要使用双反斜杠。所以你需要改变：

$('#StateProvinceType.StateProvinceTypeId')

为：

$('#StateProvinceType\\.StateProvinceTypeId')

【讨论】：