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

Posted 2023-05-08

【中文标题】如何从客户端禁用 DevExpress MVC 组合框（JS / JQuery）

【英文标题】：How to disable a DevExpress MVC combobox from the client (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 选择器）

【参考方案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')