c# 绑定到模型的单选按钮；检查状态样式 css

Question

我正在尝试使用 css 为这些单选按钮设置“选中状态”的样式。除了选中之外，我已经设置了所有其他状态的样式，并且我已经对将它们切换到 input type="radio" 进行了一些挖掘，因为它们看起来更容易设置样式，但还没有找到将它们绑定到模型的方法。见以下代码：

<div class="form-group">
     <div class="btn-group" id="roles_select" role="group" data-toggle="buttons">
       @Html.LabelFor(model => model.recipientTypeId, "Assign Notification To: ", htmlAttributes: new { @class = "control-label col-md-5" })
                <label class="btn btn-primary roles" id="admin">
                    @Html.RadioButtonFor(model => model.recipientTypeId, "2")Admin
                </label>
                <label class="btn btn-primary roles" id="candidate">
                    @Html.RadioButtonFor(model => model.recipientTypeId, "1")Candidate
                </label>
                <label class="btn btn-primary col-md-push-0 roles" id="manager">
                    @Html.RadioButtonFor(model => model.recipientTypeId, "3")Manager
                </label>
      </div>
</div>

来自控制器的代码：

public ActionResult Create()
    {

        ViewBag.recipientTypeId = new SelectList(db.RecipientType, "Id", "recipientRole");
        return View();
    }

    [HttpPost]
    [ValidateAntiForgeryToken]
    public ActionResult Edit([Bind(Include = "Id,notificationType1,recipientTypeId,frequency")] NotificationType notificationType)
    {
        if (ModelState.IsValid)
        {
            db.Entry(notificationType).State = EntityState.Modified;
            db.SaveChanges();
            return RedirectToAction("Create");
        }
        ViewBag.recipientTypeId = new SelectList(db.RecipientType, "Id", "frequency", "recipientRole", notificationType.recipientTypeId);
        return View(notificationType);
    }

CSS 被剪断（不工作）

#roles_select input[type="radio"]:checked + label {
background-color:#fff;
}

Answer 1

您可以使用jquery 执行此操作。

您只需将change 事件处理程序触发到radio 按钮即可。

$('input[type="radio"]').on('change', function() {
     $('input[type="radio"]').removeClass('radioChecked');
     $(this).addClass('radioChecked'); 
});

你的 CSS：

.radiocheck { color: black; background-color:black; }

这是我的示例：jsfiddle。