diff options
author | Patrick H. Lauke <redux@splintered.co.uk> | 2015-05-03 19:05:12 +0300 |
---|---|---|
committer | Patrick H. Lauke <redux@splintered.co.uk> | 2015-05-03 19:05:12 +0300 |
commit | a254782ca4c284098e007bab7aa910df7147e47d (patch) | |
tree | c59653b1ade5e5a23dfeaec741b310d8f097709b /js | |
parent | 7b9f204cb4b8fa5cb06b2a9233324997c093f629 (diff) | |
parent | 0c1daaf2cec70778fb093280becb0627155fbef4 (diff) |
Merge pull request #16404 from patrickhlauke/radio-checkbox-kbd-toggle-fix
Fix radio and checkbox keyboard handling in .btn-group
Diffstat (limited to 'js')
-rw-r--r-- | js/button.js | 14 | ||||
-rw-r--r-- | js/tests/unit/button.js | 13 |
2 files changed, 9 insertions, 18 deletions
diff --git a/js/button.js b/js/button.js index 8716aff4f6..3e2e345127 100644 --- a/js/button.js +++ b/js/button.js @@ -57,14 +57,18 @@ var $input = this.$element.find('input') if ($input.prop('type') == 'radio') { if ($input.prop('checked')) changed = false - if (!$input.prop('checked') || !this.$element.hasClass('active')) $parent.find('.active').removeClass('active') + $parent.find('.active').removeClass('active') + this.$element.addClass('active') + } else if ($input.prop('type') == 'checkbox') { + if (($input.prop('checked')) !== this.$element.hasClass('active')) changed = false + this.$element.toggleClass('active') } - if (changed) $input.prop('checked', !this.$element.hasClass('active')).trigger('change') + $input.prop('checked', this.$element.hasClass('active')) + if (changed) $input.trigger('change') } else { this.$element.attr('aria-pressed', !this.$element.hasClass('active')) + this.$element.toggleClass('active') } - - if (changed) this.$element.toggleClass('active') } @@ -107,7 +111,7 @@ var $btn = $(e.target) if (!$btn.hasClass('btn')) $btn = $btn.closest('.btn') Plugin.call($btn, 'toggle') - if (!$(e.target).is('input[type="radio"]')) e.preventDefault() + if (!($(e.target).is('input[type="radio"]') || $(e.target).is('input[type="checkbox"]'))) e.preventDefault() }) .on('focus.bs.button.data-api blur.bs.button.data-api', '[data-toggle^="button"]', function (e) { $(e.target).closest('.btn').toggleClass('focus', /^focus(in)?$/.test(e.type)) diff --git a/js/tests/unit/button.js b/js/tests/unit/button.js index ed7b248d4a..691796c428 100644 --- a/js/tests/unit/button.js +++ b/js/tests/unit/button.js @@ -130,19 +130,6 @@ $(function () { assert.strictEqual($btn.attr('aria-pressed'), 'true', 'btn aria-pressed state is true') }) - QUnit.test('should toggle active when btn children are clicked within btn-group', function (assert) { - assert.expect(2) - var $btngroup = $('<div class="btn-group" data-toggle="buttons"/>') - var $btn = $('<button class="btn">fat</button>') - var $inner = $('<i/>') - $btngroup - .append($btn.append($inner)) - .appendTo('#qunit-fixture') - assert.ok(!$btn.hasClass('active'), 'btn does not have active class') - $inner.trigger('click') - assert.ok($btn.hasClass('active'), 'btn has class active') - }) - QUnit.test('should check for closest matching toggle', function (assert) { assert.expect(12) var groupHTML = '<div class="btn-group" data-toggle="buttons">' |