Fix Toggle buttons don't honor [disabled] or .disabled

2 files changed, 23 insertions, 0 deletions

diff --git a/js/src/button.js b/js/src/button.js
index 6295d0db0..722fd489d 100644
--- a/js/src/button.js
+++ b/js/src/button.js
@@ -90,6 +90,12 @@ const Button = (($) => {
           }
 
           if (triggerChangeEvent) {
+            if (input.hasAttribute('disabled') ||
+              rootElement.hasAttribute('disabled') ||
+              input.classList.contains('disabled') ||
+              rootElement.classList.contains('disabled')) {
+              return
+            }
             input.checked = !$(this._element).hasClass(ClassName.ACTIVE)
             $(input).trigger('change')
           }
diff --git a/js/tests/unit/button.js b/js/tests/unit/button.js
index abc04e10a..489d400a6 100644
--- a/js/tests/unit/button.js
+++ b/js/tests/unit/button.js
@@ -156,4 +156,21 @@ $(function () {
     assert.ok($btn2.is(':not([aria-pressed])'), 'label for nested radio input has not been given an aria-pressed attribute')
   })
 
+  QUnit.test('should handle disabled attribute on non-button elements', function (assert) {
+    assert.expect(2)
+    var groupHTML = '  <div class="btn-group disabled" data-toggle="buttons" aria-disabled="true" disabled>'
+      + '<label class="btn btn-danger disabled" aria-disabled="true" disabled>'
+      + '<input type="checkbox" aria-disabled="true" autocomplete="off" disabled class="disabled"/>'
+      + '</label>'
+      + '</div>'
+    var $group = $(groupHTML).appendTo('#qunit-fixture')
+
+    var $btn = $group.children().eq(0)
+    var $input = $btn.children().eq(0)
+
+    $btn.trigger('click')
+    assert.ok($btn.is(':not(.active)'), 'button did not become active')
+    assert.ok(!$input.is(':checked'), 'checkbox did not get checked')
+  })
+
 })