Javascript 引导数据切换单选按钮/复选框选中属性
我看到了许多与这个问题有关的问题。但这些问题与我的设想无关 下面是我在JSP页面中的单选按钮设计。为了在标签中添加active类,我使用了JSTL标记Javascript 引导数据切换单选按钮/复选框选中属性,javascript,jquery,twitter-bootstrap,jsp,Javascript,Jquery,Twitter Bootstrap,Jsp,我看到了许多与这个问题有关的问题。但这些问题与我的设想无关 下面是我在JSP页面中的单选按钮设计。为了在标签中添加active类,我使用了JSTL标记 <div class="btn-group" data-toggle="buttons"> <label class="btn btn-primary <c:if test=" ${initialExamScreenTwoForm.cervicalSpineHeadTiltRight==1} ">active
<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>
我想不出是什么问题。请帮我找出我做错了什么。问题出在bootstrap.js版本中(我使用的是3.2.0)。我无法更新完整代码,因为我为我的项目添加了其他代码 因此,我更新了bootstrap.min.js中的data toggle=“buttons”部分,它工作正常。我更改的代码是
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 singh问题出在bootstrap.js版本中(我使用的是3.2.0)。我无法更新完整代码,因为我为我的项目添加了其他代码 因此,我更新了bootstrap.min.js中的data toggle=“buttons”部分,它工作正常。我更改的代码是
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 singh您还需要在checked Property的复选框输入中放置JSTL条件,而从后端加载时,它工作正常。当我在前端选择其他值时,它显示为“已选择”(即已添加活动类),但未将checked属性添加到按钮。您使用的是什么引导JS版本?当前版本是3.3.6,新版本中有很多更改。请更新并检查itokay.好吗。。我有一个疑问,如果我更改了版本,它会影响任何设计吗?您还需要在checked Property的复选框输入中放置JSTL条件,而从后端加载时,它工作正常。当我在前端选择其他值时,它显示为“已选择”(即已添加活动类),但未将checked属性添加到按钮。您使用的是什么引导JS版本?当前版本是3.3.6,新版本中有很多更改。请更新并检查itokay.好吗。。我有一个疑问,如果我改变了版本,它会影响任何设计?