MVC / Bootstrap - 单选按钮组在初始化时无法选择

Question

我在我的MVC应用程序中有一个编辑表单，其中包含交通灯状态。

当打开表单时，“灯”上的勾号始终设置为“绿色”，尽管使用jQuery代码可以设置其他状态。

所有的代码都被触发了，但是它只是没有设置初始状态。

在这个简化的示例中，如果Model的AlertLevel设置为“Red”，“勾号”仍然在“绿色”上。

标记

@Html.HiddenFor(model => model.AlertLevel)
<span class="btn-group RAGStatus" data-toggle="buttons">
    <label class="btn btn-success active " style="width:50px; height: 30px">
        <input type="radio" name="ragStatus" id="ragButton_Green" autocomplete="off" value="Green">
        <span class="glyphicon glyphicon-hidden unchecked"></span> <span class="glyphicon glyphicon-ok checked"></span>
    </label>
    <label class="btn btn-warning" style="width:50px; height: 30px">
        <input type="radio" name="ragStatus" id="ragButton_Amber" autocomplete="off" value="Amber">
        <span class="glyphicon glyphicon-hidden unchecked"></span> <span class="glyphicon glyphicon-ok checked"></span>
    </label>
    <label class="btn btn-danger" style="width:50px; height: 30px">
        <input type="radio" name="ragStatus" id="ragButton_Red" autocomplete="off" value="Red">
        <span class="glyphicon glyphicon-hidden unchecked"></span> <span class="glyphicon glyphicon-ok checked"></span>
    </label>
</span>

jQuery

$(function () {
    var status = $("#AlertLevel").val();
    $('#ragButton_' + status).prop("checked", true);
})

模型

public class DeptStatus
{
    public string AlertLevel { get; set; }
}

CSS（用于图标显示）

.RAGStatus .checked {
    display: none;
}

.RAGStatus .active .checked {
    display: inline-block;
}

.RAGStatus .active .unchecked {
    display: none;
}

更新

在一个后续的jQuery函数中（从示例中删除），如果我执行var ragStatus = $('input[name=ragStatus]:checked').val();，它会返回“红色”。

- Chris Hammond

---

你的意思是当视图加载时，AlertLevel已经有一个值，但相应的单选按钮在加载时没有被选中？ - Gareth

你的编辑意味着设置checked属性的脚本正在工作（尽管如果你使用@Html.RadioButtonFor()方法生成HTML，你的脚本是不必要的）。我猜想这可能与<span>元素和/或CSS有关。 - user3559349

Answer 1

您不需要依靠jQuery来选择按钮组的初始值，因为razor能够为您完成这项工作。在您的情况下，代码如下：

<span class="btn-group RAGStatus" data-toggle="buttons">
    <label class="btn btn-success active " style="width:50px; height: 30px">
        @Html.RadioButtonFor(m => m.AlertLevel, "Green", new { autocomplete = "off" })
        <span class="glyphicon glyphicon-hidden unchecked"></span> <span class="glyphicon glyphicon-ok checked"></span>
    </label>
    <label class="btn btn-warning" style="width:50px; height: 30px">
        @Html.RadioButtonFor(m => m.AlertLevel, "Amber", new { autocomplete = "off" })
        <span class="glyphicon glyphicon-hidden unchecked"></span> <span class="glyphicon glyphicon-ok checked"></span>
    </label>
    <label class="btn btn-danger" style="width:50px; height: 30px">
        @Html.RadioButtonFor(m => m.AlertLevel, "Red", new { autocomplete = "off" })
        <span class="glyphicon glyphicon-hidden unchecked"></span> <span class="glyphicon glyphicon-ok checked"></span>
    </label>
</span>

- Gareth

---

我可以在调试控制台中清楚地看到HTML代码被正确生成了 <input autocomplete="off" checked="checked" id="AlertLevelx" name="AlertLevelx" type="radio" value="Red" />，但它仍然将勾选标记放在绿色按钮上（这是一个有用的答案，但并没有解决问题）。 - Chris Hammond

请问您能否将渲染后的 HTML 代码添加到您的问题描述中吗？ - Gareth

Answer 2

看起来Bootstrap会向容器添加一个active类。

尝试一下。

$(function () {
    var status = $("#AlertLevel").val();
    $('#ragButton_' + status).trigger('click');
})

- BenG

Answer 3

如果你加上什么呢：

$('#ragButton_' + status).attr('checked', 'checked);

由于jQuery版本的原因，prop函数可能会出现一些问题。

- Nikush Jorjoliani