Button toggling - trigger change event on input

Bootstrap’s .button styles can be applied to other elements, such as labels, to provide checkbox or radio style button toggling.

When the checkbox or radio state is changed, there should be triggered the change event. Currently, the change event is triggered on the Button, which is not correct. Only input fields do support the change event.

diff --git a/js/src/button.js b/js/src/button.js
index 3144a3f101230843d5d5c7177be5e22c3e1caab9..f5551f169e51b26536ac05d62a94c7457e54e498 100644 (file)
--- a/js/src/button.js
+++ b/js/src/button.js
@@ -90,7 +90,7 @@ const Button = (($) => {
 
           if (triggerChangeEvent) {
             input.checked = !$(this._element).hasClass(ClassName.ACTIVE)
-            $(this._element).trigger('change')
+            $(input).trigger('change')
           }
         }
       } else {

diff --git a/js/tests/unit/button.js b/js/tests/unit/button.js
index 5648506cf5745fdfa98001da637319b03b5bc5e8..f0ce96488fbb28b97b388a4a4ede16eabe36bea1 100644 (file)
--- a/js/tests/unit/button.js
+++ b/js/tests/unit/button.js
@@ -72,6 +72,26 @@ $(function () {
     assert.strictEqual($btn.attr('aria-pressed'), 'true', 'btn aria-pressed state is true')
   })
 
+  QUnit.test('should trigger input change event when toggled button has input field', function (assert) {
+    assert.expect(1)
+    var done = assert.async()
+
+    var groupHTML = '<div class="btn-group" data-toggle="buttons">'
+      + '<label class="btn btn-primary">'
+      + '<input type="radio" id="radio" autocomplete="off">Radio'
+      + '</label>'
+      + '</div>'
+    var $group = $(groupHTML).appendTo('#qunit-fixture')
+
+    $group.find('input').on('change', function (e) {
+      e.preventDefault()
+      assert.ok(true, 'change event fired')
+      done()
+    })
+
+    $group.find('label').trigger('click')
+  })
+
   QUnit.test('should check for closest matching toggle', function (assert) {
     assert.expect(12)
     var groupHTML = '<div class="btn-group" data-toggle="buttons">'