Bootstrap數據切換單選按鈕/復選框已選中屬性

Question

我看到了許多與此問題有關的問題。 但是這些問題與我的情況無關。

以下是我在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")
};

我不知道是什么問題。 請幫助我找到我做錯了。

Answer 1

問題出在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