Question

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

最初打开表单时，＆＃34;上的复选标记点亮＆＃34;总是设置为＆＃34;绿色＆＃34;尽管jQuery代码设置不然。

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

在这个简化的例子中，如果Model的AlertLevel被设置为＆＃34; Red＆＃34;，那么＆＃34; tick＆＃34;仍然在＆＃34;绿色＆＃34;

标记

@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();，则返回＆＃34; Red＆＃34;

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>

Answer 2

看起来bootstrap会在容器中添加active类。

试

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

Answer 3

如果添加：

，该怎么办？

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

由于jQuery的版本，prop函数可能存在一些问题。

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

3 个答案: