Skip to content
GitLab
Projects Groups Snippets
  • /
  • Help
    • Help
    • Support
    • Community forum
    • Submit feedback
    • Contribute to GitLab
  • Sign in / Register
  • B bootstrap
  • Project information
    • Project information
    • Activity
    • Labels
    • Members
  • Repository
    • Repository
    • Files
    • Commits
    • Branches
    • Tags
    • Contributors
    • Graph
    • Compare
  • Issues 263
    • Issues 263
    • List
    • Boards
    • Service Desk
    • Milestones
  • Merge requests 114
    • Merge requests 114
  • CI/CD
    • CI/CD
    • Pipelines
    • Jobs
    • Schedules
  • Deployments
    • Deployments
    • Environments
    • Releases
  • Packages and registries
    • Packages and registries
    • Package Registry
    • Infrastructure Registry
  • Monitor
    • Monitor
    • Incidents
  • Analytics
    • Analytics
    • Value stream
    • CI/CD
    • Repository
  • Wiki
    • Wiki
  • Snippets
    • Snippets
  • Activity
  • Graph
  • Create a new issue
  • Jobs
  • Commits
  • Issue Boards
Collapse sidebar
  • Bootstrap
  • bootstrap
  • Issues
  • #14137
Closed
Open
Issue created Jul 13, 2014 by Administrator@rootContributor

"checked" DOM property not always being effectively set

Created by: Kolyunya

Hello! I am using the latest version of Bootstrap from this repo to render a group of checkbox buttons very much like in the demo.

<div class="btn-group" data-toggle="buttons">
  <label class="btn btn-primary active">
    <input type="checkbox" checked> Option 1 (pre-checked)
  </label>
  <label class="btn btn-primary">
    <input type="checkbox"> Option 2
  </label>
  <label class="btn btn-primary">
    <input type="checkbox"> Option 3
  </label>
</div>

I've noticed a constantly reproducing issue. When I click on the checkbox button the actual input's checked DOM property sometimes is not being set correctly. That is I click on the button, the label changes it's state, BUT the firebug says that the input's DOM property was not changed. And firebug doe not lie, because when I submit the form the input value is incorrect.

The issue can be easily reproduced here. Just trigger all the checkboxed from the first line (1,2,3,4,5,6) and then look their's 'checked' DOM property. One or two of them will have incorrect values.

I've looked the source code and the problem is in this function

  Button.prototype.toggle = function () {
    var changed = true
    var $parent = this.$element.closest('[data-toggle="buttons"]')

    if ($parent.length) {
      var $input = this.$element.find('input')
      if ($input.prop('type') == 'radio') {
        if ($input.prop('checked') && this.$element.hasClass('active')) changed = false
        else $parent.find('.active').removeClass('active')
      }
      if (changed) $input.prop('checked', !this.$element.hasClass('active')).trigger('change')
    }

    if (changed) this.$element.toggleClass('active')
  }

The

if (changed) $input.prop('checked', !this.$element.hasClass('active')).trigger('change')

line does not set the property for some reason. A very strange thing is that when I try to console.log($input.prop('checked')) after this line, it logs a correct value.

Any help is greatly appreciated. Thank you.

Assignee
Assign to
Time tracking