mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-08-14 01:24:19 +02:00
Code Issues Releases Wiki Activity

Merge pull request #16404 from patrickhlauke/radio-checkbox-kbd-toggle-fix

Browse Source 
Fix radio and checkbox keyboard handling in .btn-group
This commit is contained in:
Patrick H. Lauke
2015-05-03 17:05:12 +01:00
parent 7b9f204cb4 0c1daaf2ce
commit a254782ca4
2 changed files with 9 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
js/button.js
View File

@@ -57,14 +57,18 @@
var $input = this.$element.find('input') var $input = this.$element.find('input')
if ($input.prop('type') == 'radio') { if ($input.prop('type') == 'radio') {
if ($input.prop('checked')) changed = false 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 { } else {
this.$element.attr('aria-pressed', !this.$element.hasClass('active')) 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) var $btn = $(e.target)
if (!$btn.hasClass('btn')) $btn = $btn.closest('.btn') if (!$btn.hasClass('btn')) $btn = $btn.closest('.btn')
Plugin.call($btn, 'toggle') 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) { .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)) $(e.target).closest('.btn').toggleClass('focus', /^focus(in)?$/.test(e.type))

13
js/tests/unit/button.js
View File

@@ -130,19 +130,6 @@ $(function () {
assert.strictEqual($btn.attr('aria-pressed'), 'true', 'btn aria-pressed state is true') 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) { QUnit.test('should check for closest matching toggle', function (assert) {
assert.expect(12) assert.expect(12)
var groupHTML = '<div class="btn-group" data-toggle="buttons">' var groupHTML = '<div class="btn-group" data-toggle="buttons">'