引导数据切换单选按钮/复选框选中属性
Bootstrap data-toggle radio button/Checkbox checked property
我看到了很多与这个问题相关的问题。但这些问题与我的场景无关。
下面是我在 JSP 页面中的单选按钮设计。为了在标签中添加活动类,我使用了 JSTL 标签。
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary <c:if test=" ${initialExamScreenTwoForm.cervicalSpineHeadTiltRight==1} ">active</c:if>">
<form:checkbox path="cervicalSpineHeadTiltRight" id="cervicalSpineHeadTiltRight_id" value="1" autocomplete="off" />Right
</label>
<label class="btn btn-primary <c:if test=" ${initialExamScreenTwoForm.cervicalSpineHeadTiltLeft==1} ">active</c:if>">
<form:checkbox id="cervicalSpineHeadTiltLeft_id" path="cervicalSpineHeadTiltLeft" value="1" autocomplete="off" />Left
</label>
<label class="btn btn-primary <c:if test=" ${initialExamScreenTwoForm.cervicalSpineHeadTiltNormal==1} ">active</c:if>">
<form:checkbox id="cervicalSpineHeadTiltNormal_id" path="cervicalSpineHeadTiltNormal" value="1" autocomplete="off" />Normal
</label>
</div>
活动类添加得很好。但选中的属性不会添加到单选按钮中。
从后端加载时,它工作正常。当我选择其他值时,在前端它显示为已选择(即添加了活动类),但选中的属性未添加到按钮中。所以它把旧值发送到后端。
在引导中,像这样使用
c.prototype.toggle = function() {
var a = !0,
b = this.$element.closest('[data-toggle="buttons"]');
if (b.length) {
var c = this.$element.find("input");
"radio" == c.prop("type") && (c.prop("checked") && this.$element.hasClass("active") ? a = !1 : b.find(".active").removeClass("active")), a && c.prop("checked", !this.$element.hasClass("active")).trigger("change")
}
a && this.$element.toggleClass("active")
};
我不知道是什么问题。请帮助我找到我做错了什么。
问题出在 bootstrap.js 版本中(我使用的是 3.2.0)。我无法更新完整代码,因为我为我的项目添加了额外的代码。
所以我更新了 bootstrap.min 中的数据切换="按钮"部分.js它工作正常。我更改的代码是。
c.prototype.toggle = function() {
var a = !0,
b = this.$element.closest('[data-toggle="buttons"]');
if (b.length) {
var c = this.$element.find("input");
"radio" == c.prop("type") ? (c.prop("checked") && (a = !1), b.find(".active").removeClass("active"), this.$element.addClass("active")) : "checkbox" == c.prop("type") && (c.prop("checked") !== this.$element.hasClass("active") && (a = !1), this.$element.toggleClass("active")), c.prop("checked", this.$element.hasClass("active")), a && c.trigger("change")
} else this.$element.attr("aria-pressed", !this.$element.hasClass("active")), this.$element.toggleClass("active")
};
var d = a.fn.button;
a.fn.button = b, a.fn.button.Constructor = c, a.fn.button.noConflict = function() {
return a.fn.button = d, this
}, a(document).on("click.bs.button.data-api", '[data-toggle^="button"]', function(c) {
var d = a(c.target);
d.hasClass("btn") || (d = d.closest(".btn")), b.call(d, "toggle"), a(c.target).is('input[type="radio"]') || a(c.target).is('input[type="checkbox"]') || c.preventDefault()
}).on("focus.bs.button.data-api blur.bs.button.data-api", '[data-toggle^="button"]', function(b) {
a(b.target).closest(".btn").toggleClass("focus", /^focus(in)?$/.test(b.type))
})
}
谢谢@kp·辛格
相关文章:
- Javascript复选框函数:;缺少:在属性id之后"
- 如何从django表单库中隐藏复选框,并使用Javascript切换其显示属性
- 更改无法正常工作的复选框的属性
- 选中复选框时插入名称属性
- 选中javascript中的属性集时,复选框更改事件未触发
- 当ng repeat上的复选框具有必需的属性时,角度ng模型将变为未定义
- 通过 Jquery 调用 tr 属性并找到我的内部复选框
- 通过 JQuery 获取单击的复选框的值属性
- KO 绑定复选框:从代码更改“选中”属性,不更改可观察字段
- 使用 onChange 属性以内联方式更改复选框的值
- Ember.js数组控制器计算属性的复选框
- 如果指定了属性,则始终选中复选框
- JQuery:如何检查复选框是否被选中并向字段添加属性
- 将input复选框的DOM属性更改反映到innerHTML属性中
- 自定义CSS复选框jQuery诱导的“;“已检查”;属性不't在视觉上”;“检查”;复选框
- 检票口复选框属性追加器
- 向复选框属性添加数字并限制选中复选框的数量
- 检查复选框属性时出错
- JQuery 1.6.1和复选框属性
- html和javascript中的复选框属性