Html 如何更优雅地禁用按钮
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10166288/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to disable a button more elegantly
提问by AnonyMouse
I have on one of my views the following razor code:
我的观点之一是以下剃刀代码：
@if (item.PMApproved != true) {
<input type="button" class="btnresetinvoice button" value="Reset" data-invoiceid="@item.InvoiceId" />
}
else {
<input type="button" class="btnresetinvoice button" value="Reset" data-invoiceid="@item.InvoiceId" disabled="disabled" />
}
Pretty rough. Basically I want to disable the button under a certain condition as you'd be able to work out from the code. What would be a more desirable way of doing this?
相当粗糙。基本上我想在特定条件下禁用按钮，因为您可以从代码中解决。这样做的更理想的方式是什么？
采纳答案by Brendan Long
I don't know what language you're using, but you might be able to move your ifstatement closer to the actual different between the two lines:
我不知道您使用的是什么语言，但您可以将您的if陈述更接近两行之间的实际差异：
<input type="button" class="btnresetinvoice button" value="Reset"
data-invoiceid="@item.InvoiceId"
@{ if(item.PMApproved != true) {
@:disabled="disabled"
} }
/>
回答by David Grant
A markup-centric solution aided by a new extension method:
由新扩展方法辅助的以标记为中心的解决方案：
public static class HtmlExtensions
{
public static HtmlString DisabledIf(this HtmlHelper html, bool condition)
{
return new HtmlString(condition ? "disabled=\"disabled\"" : "");
}
}
In your views, reuse out the wazoo:
在您看来，重用 wazoo：
<button type="reset" @Html.DisabledIf(someCondition)>Clear Fields</button>
Nicely reusable, and the rendered markup is very clean with regards to whitespace:
很好地可重用，并且渲染的标记在空白方面非常干净：
<button type="reset" disabled="disabled">Clear Fields</button>
回答by Gildor
try this
尝试这个
<button type="submit" disabled="@(!item.PMApproved)"></button>
回答by user1985065
<input type="button" value="Reset" @{@((!item.PMApproved) ? null : new { disabled = "disabled" })}; />
<input type="button" value="Reset" @{@((!item.PMApproved) ? null : new { disabled = "disabled" })}; />
No need for that bloated code, just keep it simple :-)
不需要那些臃肿的代码，只需保持简单:-)
回答by Darin Dimitrov
A helper could help:
助手可以帮助：
public static class HtmlExtensions
{
public static IHtmlString ApproveButton(this HtmlHelper htmlHelper, MyViewModel item)
{
var button = new TagBuilder("input");
button.Attributes["type"] = "button";
button.Attributes["value"] = "Reset";
button.AddCssClass("btnresetinvoice");
button.AddCssClass("button");
button.Attributes["data-invoiceid"] = item.InvoiceId.ToString();
if (item.PMApproved)
{
button.Attributes["disabled"] = "disabled";
}
return new HtmlString(button.ToString(TagRenderMode.SelfClosing));
}
}
and then:
进而：
@Html.ApproveButton(item)
回答by O?uzhan Türk
<button @(isEnabled ? null : "disabled")>Butt</button>
回答by Ire
Possible easy way:
可能的简单方法：
<input type="button" @(item.PMApproved ? "disabled" : "") />
回答by Andrii
Using asp.net mvc5 razor:
使用 asp.net mvc5 razor：
@if(condition)
{
<button data-toggle="collapse" data-target="#content">Details</button>
}
else
{
<button disabled>Details</button>
}
It prevents attempting to enable button from DevTools, because razor not visible for DevTools
它可以防止尝试从 DevTools 启用按钮，因为 DevTools 看不到 razor
