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.

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 {

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