question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Using data-toggle on a <label> with an <input> prevents default functionality

See original GitHub issue

Using data-toggle on a <label> with a <input type="radio|checkbox"> prevents default functionality of the input toggling between the items.

OS: MacOS Sierra Browser: Safari

JSBin: https://jsbin.com/selasukami/edit?html,css,output

v4 alpha-6 Bootstrap

Issue Analytics

  • State:closed
  • Created 6 years ago
  • Reactions:1
  • Comments:9 (8 by maintainers)

github_iconTop GitHub Comments

1reaction
Johann-Scommented, Jan 8, 2019
0reactions
patrickhlaukecommented, Dec 26, 2022

This sort of pattern https://jsbin.com/selasukami/edit?html,css,output seems to try and do two things at the same time. The controls should either be tab controls, or radio buttons…not both. As such, I’d suggest this is not a pattern we’d want to fix/support nor encourage in our code.

Read more comments on GitHub >

github_iconTop Results From Across the Web

stop label from toggling the input checkbox - Stack Overflow
The best solution would be to let label toggle the checkbox as ... You could prevent the default behaviour of the click event...
Read more >
JavaScript - Bootstrap
As of 3.0.0, all Bootstrap events are namespaced. All infinitive events provide preventDefault functionality. This provides the ability to stop the execution ...
Read more >
The Label element - HTML: HyperText Markup Language | MDN
The label text is not only visually associated with its corresponding text input; it is programmatically associated with it too. · When a...
Read more >
lightning-input - documentation - Salesforce Developers
The components are automatically wired up to your record data, labels, ... The component uses date-style="medium" by default to display the date in...
Read more >
Javascript - UA Bootstrap - Arizona Digital
Note: The data-toggle="dropdown" attribute is relied on for closing dropdown menus at an application level, so it's a good idea to always use...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found