Bootstrap data-toggle radio button/Checkbox checked property

Question

I saw many questions related to this issue. But that questions are not related to my scenario.

Below is my radio button design in JSP page. To add active class in label i used JSTL tags.

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

The active class is added fine. But checked property is not added to the radio button.

While loading from back end it's working fine. When i selecting other value, In front end it's showing like selected (ie active class was added) but checked property is not added to the button. So it's sending old value to the back end.

In bootstrap, using like this

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")
};

I can't figure out what is the issue. Please help me to find what i did wrong.

Answer 1

The problem is in version of bootstrap.js(i am using 3.2.0) . I can't update full code, because i added the additional code for my project.

So i Updated the data-toggle="buttons" part in bootstrap.min.js it's working fine. The Code i changed is.

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))
})
}

Thanks @kp singh