Question

我正在尝试使用css为这些单选按钮设置“已检查状态”的样式。我已经设置了除了检查之外的所有其他状态，并且我已经完成了将这些切换到输入类型=“无线电”的一些挖掘，因为它们看起来更容易设计，但还没有找到一种方法来保持它们与模型绑定。请参阅以下代码：

<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 Snipped（不工作）

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

c＃单选按钮绑定到模型;检查状态造型css

1 个答案: