Javascript MVC/引导-组中的单选按钮未在初始化时选择

我的MVC应用程序中有一个编辑表单，它具有红绿灯状态

当表单最初打开时，“lights”上的复选标记总是设置为“green”，尽管jQuery代码设置为“green”

所有代码都在启动，但它只是没有设置初始状态

在此简化示例中，如果模型的AlertLevel设置为“红色”，则“勾号”仍处于“绿色”状态

标记

@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>

型号

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

CSS（用于图示符图标显示）

更新

---

在后续jQuery函数中（从示例中删除），如果我执行

var ragStatus=$（'input[name=ragStatus]：checked'）.val（）

然后返回“Red”

看起来像是引导程序向容器添加了一个

活动的

类

试一试

如果您添加：

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

---

由于jQuery版本的原因，

prop

函数可能存在一些问题。

您不需要依靠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>

@RadioButtonOn（m=>m.AlertLevel，“绿色”，新的{autocomplete=“off”}）
@RadioButtonOn（m=>m.AlertLevel，“琥珀色”，新的{autocomplete=“off”}）
@RadioButtonOn（m=>m.AlertLevel，“红色”，新的{autocomplete=“off”}）

是否意味着加载视图时，

AlertLevel

有一个值，但加载时未选择相应的单选按钮？您的编辑意味着用于设置选中的

属性的脚本正在工作（尽管您不需要脚本，但您使用的是
@Html.RadioButtonFor（）
生成html的方法）。我假设这是
元素和/或cssWell的问题，我当然可以在调试控制台中看到html正确生成
，但它仍然在绿色按钮上打勾（有用的答案，但没有解决问题）。请将呈现的html添加到问题中好吗？
$(function () {
    var status = $("#AlertLevel").val();
    $('#ragButton_' + status).trigger('click');
})

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

<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>