Html.DropDownList-禁用/只读


69

使用MVC Html.DropDownList时,我需要设置哪个选项以使下拉框变为只读状态?

我尝试过类似...的事情。

Html.DropDownList("Types", Model.Types, new { _Enabled = "false" })

...以及沿着这条线的许多不同事物;no,没有喜悦!

我以为这很容易.....而且可能是!


6
注意下面的@Thomas答案。将Html.DropDownList标记为已禁用可阻止表单发布其持有的值。如何禁用控件或将其设为只读,但仍在邮寄时提交表单值?
YeahStu

如何以一个布尔值禁用动态设置属性?
超人

Answers:


146

尝试这个

Html.DropDownList("Types", Model.Types, new { @disabled = "disabled" })

49
但是通过这样做,下拉列表的绑定值将不会到达控制器。
Vishnu Vikraman

尝试使用它,但是无论变体@ Html.DropDownList(“ Tug_ID”,model => model.Tug_ID,new {@disabled =“ disabled”})
New2This2014年

8
但这将阻止DDL值与表单一起提交。
Mahmoud 2014年

1
@Jamie R,如何使用一个布尔值禁用动态设置属性?
超人

2
@VishnuVikraman,可能是您的完美答案,
Smit Patel

91

关于渔获22:

如果使用@disabled,则该字段不会发送到操作(Mamoud);如果使用@readonly,则下拉bug仍可让您更改值

解决方法:使用@disabled,并在下拉列表后添加隐藏的字段:

@Html.HiddenFor(model => model.xxxxxxxx)

然后将其真正禁用,并将其也发送到动作。


14
这是我找到的最有用的解决方案。我不知道为什么投票这么少。
Mikhail 2015年

真的很好。我只看了答案却没有看下面的评论,花了2个小时才弄清楚为什么回发中设置了零值
tete

1
您必须谨慎使用此解决方案:MVC将打印两个带有attribute的元素,id="MyModelField"如果您愿意使用JS与select / hidden元素进行交互,则可能会很棘手。
Quentin S.

1
但这不是有效的html。你必须用相同的ID两个元素
克特林Rădoi

要解决@CătălinRădoi提出的问题,只需使用自定义ID使用new {id = "SomeId"}
Alex

6
<script type="text/javascript">
$(function () {
        $(document) .ajaxStart(function () {
                $("#dropdownID").attr("disabled", "disabled");
            })
            .ajaxStop(function () {
                $("#dropdownID").removeAttr("disabled");

            });

});
</script>

这个对我没有用,您能扩展这个例子吗?
TheBigSot

3

我必须禁用下拉列表并隐藏主要ID

<div class="form-group">
        @Html.LabelFor(model => model.OBJ_ID, "Objs", htmlAttributes: new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            @Html.DropDownList("OBJ_ID", null, htmlAttributes: new { @class = "form-control", @disabled = "disabled"})
            @Html.HiddenFor(m => m.OBJ_ID)
            @Html.ValidationMessageFor(model => model.OBJ_ID, "", new { @class = "text-danger" })
        </div>
    </div>

3

对某些人可能是显而易见的提示,但对其他人而言则不是。

如果您使用基于的HTML Helper,DropDownListFor则您的ID将在HiddenFor输入中重复。因此,您将有重复的ID,这些ID在HTML中是无效的,并且如果您使用JavaScript填充HiddenForDropDownList那么你就会有问题。

解决方案是在htmlattributes数组中手动​​设置ID属性...

@Html.HiddenFor(model => model.Entity)

@Html.EnumDropDownListFor(
  model => model.Entity, 
  new { 
         @class = "form-control sharp", 
         onchange = "", 
         id =` "EntityDD", 
         disabled = "disabled" 
       }
)

2

或者,您可以尝试执行以下操作:

Html.DropDownList("Types", Model.Types, new { @readonly = "true" })

5
这行不通。下拉列表显示为灰色,但仍处于启用状态且仍可用。
凯伊(Kye)2013年

嗨,我想仅基于该值来禁用/启用特定页面的下拉菜单,我正在通过模型传递它。我尝试将true / false传递给残疾人士,但它无法正常工作。您能帮忙吗?
ravithejag 2014年

2

风格化

 select[readonly] option, select[readonly] optgroup {
        display: none;
    }

1

我只是这样做,并称之为一天

Model.Id > -1 ? Html.EnumDropDownListFor(m => m.Property, new { disabled = "disabled" }) : Html.EnumDropDownListFor(m => m.Property)


0

Html.DropDownList(“ Types”,Model.Types,new {@disabled =“ disabled”})@ Html.Hidden(Model.Types)并使用隐藏控件来保存和恢复数据


0

为了完整起见,这里是HTML Helper for DropDownListFor,它在禁用错误选择时添加了启用的参数。它保留在标记中定义的html属性,或者在标记中启用html属性的使用,将选择值发布到服务器,并且使用非常干净和简单。

这是帮助程序的代码:

public static MvcHtmlString DropDownListFor<TModel, TProperty>(this HtmlHelper<TModel> html, Expression<Func<TModel, TProperty>> expression, IEnumerable<SelectListItem> selectList, object htmlAttributes, bool enabled)
{
  if (enabled)
  {
    return SelectExtensions.DropDownListFor<TModel, TProperty>(html, expression, selectList, htmlAttributes);
  }

  var htmlAttributesAsDict = HtmlHelper.AnonymousObjectToHtmlAttributes(htmlAttributes);
  htmlAttributesAsDict.Add("disabled", "disabled");
  string selectClientId = html.ViewContext.ViewData.TemplateInfo.GetFullHtmlFieldId(ExpressionHelper.GetExpressionText(expression));
  htmlAttributesAsDict.Add("id", selectClientId + "_disabled");

  var hiddenFieldMarkup = html.HiddenFor<TModel, TProperty>(expression);
  var selectMarkup = SelectExtensions.DropDownListFor<TModel, TProperty>(html, expression, selectList, htmlAttributesAsDict);
  return MvcHtmlString.Create(selectMarkup.ToString() + Environment.NewLine + hiddenFieldMarkup.ToString());
}

和用法,目标是禁用select选项中只有一项的标记:

@Html.DropDownListFor(m => m.SomeValue, Model.SomeList, new { @class = "some-class" }, Model.SomeList > 1)

还有一个甚至更优雅的HTML Helper示例,目前不提供后期支持(相当直接的工作,只需使用HAP并将隐藏的输入添加为根元素同级和交换ID)即可:

public static MvcHtmlString Disable(this MvcHtmlString previous, bool disabled, bool disableChildren = false)
{
  if (disabled)
  {
    var canBeDisabled = new HashSet<string> { "button", "command", "fieldset", "input", "keygen", "optgroup", "option", "select", "textarea" };
    var doc = new HtmlDocument();
    doc.LoadHtml(previous.ToString());
    var rootElements = doc.DocumentNode.Descendants().Where(
      hn => hn.NodeType == HtmlNodeType.Element && 
      canBeDisabled.Contains(hn.Name.ToLower()) && 
      (disableChildren || hn.ParentNode.NodeType == HtmlNodeType.Document));

    foreach (var element in rootElements)
    {
      element.SetAttributeValue("disabled", "");
    }
    string html = doc.DocumentNode.OuterHtml;
    return MvcHtmlString.Create(html);
  }
  return previous;
}

例如,有一个模型属性bool AllInputsDisabled,当为true时,应禁用所有html输入:

@Html.TextBoxFor(m => m.Address, new { placeholder = "Enter address" }).Disable(Model.AllInputsDisabled)

@Html.DropDownListFor(m => m.DoYou, Model.YesNoList).Disable(Model.AllInputsDisabled)

0

您可以使用这种方法

禁用除所选选项之外的所有选项:

<select>
    <option disabled>1</option>
    <option disabled>2</option>
    <option selected>3</option>
</select>

这样,下拉列表仍会提交,但用户无法选择其他值。

使用jQuery

<script>
    $(document).ready(function () {
        $('#yourSelectId option:not(:selected)').prop("disabled", true);
    });
</script>

OP特别询问有关在MVC中使用Html.DropDownList的问题。
吉姆议长

0

尝试使用@disabled和jquery,这样就可以在Controller上获取值。

Html.DropDownList("Types", Model.Types, new {@class = "your_class disabled", @disabled= "disabled" })

添加一个名为“ disabled”的类,以便可以通过搜索该类来启用该类(在禁用多个字段的情况下),然后在不通过验证属性输入控制器的情况下可以使用“ setTimeout”

<script>

  function clickSubmit() {
    $("select.disabled").attr("disabled", false);
    setTimeout(function () {
        $("select.disabled").attr("disabled", true);
    }, 500);
  }
</script>

像这样提交按钮。

 <button type="submit" value="Submit" onclick="clickSubmit();">Save</button>

在输入的情况下,只需使用@ readonly =“ readonly”

@Html.TextBoxFor("Types",Model.Types, new { @class = "form-control", @readonly= "readonly" })

-1

我首先参考了所有评论和答案,然后创建了这个答案。这将解决下拉填充错误,即使它被禁用。

步骤01

Html.DropDownList("Types", Model.Types, new {@readonly="readonly"})

步骤02 这是CSS指针事件删除代码。

<style type="text/css">
    #Types {
        pointer-events:none;
    }
</style>
这样您就可以得到预期的结果

经过测试和证明

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.