onclick for Bootstrap .btn-group checkbox works in JSFiddle but not browser

问题

The form below contains a Bootstrap toggle button group that uses checkboxes. I need to listen for click events on the checkbox inputs.

<html>
<head>
<title>Example: Bootstrap toggle button group</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://code.jquery.com/jquery-3.4.1.slim.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.css">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.js"></script>
</head>
 
<body>
    <form role="form" id="form">
  <div class="form-group">
    <div>
      <div>
        <label for="fname">Name:</label>
      </div>
      <div id="fname" class="btn-group btn-group-toggle" data-toggle="buttons">
        <label class="btn btn-primary">
          a
          <input type="checkbox" value="a" name="fname">
        </label>
        <label class="btn btn-primary">
          b
          <input type="checkbox" value="b" name="fname">
        </label>
        <label class="btn btn-primary">
          c
          <input type="checkbox" value="c" name="fname">
        </label>
      </div>
    </div>
  </div>
</form>
 
    <script type="text/javascript">//<![CDATA[
$(function() {
   
 $('#fname input').click(function() {
          console.log('you clicked '+$(this).attr('value'))
          });

});
//]]></script>
  
  </body>
  </html>

For the purpose of this example, I have registered the following handler that prints the value of a checkbox when clicked:

$(function() {
    
  $('#fname input').click(function() {
    console.log('you clicked '+$(this).attr('value'))
  });

});

This works fine in (JSFiddle) - when you select an option in the button group, the handler prints the value of the underlying checkbox to the console as expected.

But when I run the page in my browser and make a selection, the handler does not fire, i.e. nothing is printed to the console. Why is this? I have copied the document exactly as it appears in the JSFiddle iframe and have also tried running it on both Chrome (v85) and Firefox (v78.0.2) to no avail.

Note: There is a 404 error for the result-light.css stylesheet that results when the page initially loads in the browser but it looks to be just a Fiddle stylesheet and removing it doesn't have any effect.

Also, I need to listen for click events specifically so on('change' will not help.

Note: I noticed that Bootstrap styles the checkbox inputs with property pointer-events: none;, could this be what's causing the click handler to be unresponsive in the browser? Setting it to initial or inherit does not seem to have an effect.

EDIT: I've voted to close this question as the problem was a mistake on my part. At the time of posting, I hadn't realised that the script I was running in my browser used Bootstrap 3.4.1 whereas the JSFiddle used a newer version 4.4.1.

I could be wrong, but I think the reason why the click handler didn't fire in the browser script was due to the Button data-API section of Boostrap 3.4.1's source code:

// BUTTON DATA-API
// ===============

if (!($(e.target).is('input[type="radio"], input[type="checkbox"]'))) {
  // Prevent double click on radios, and the double selections (so cancellation) on checkboxes
  e.preventDefault()
  // The target component still receive the focus
  if ($btn.is('input,button')) $btn.trigger('focus')
  else $btn.find('input:visible,button:visible').first().trigger('focus')
}

This section prevents double clicks on radios, and double selections on checkboxes and was left out of v4.4.1. Manually omitting it from the v3.4.1's source makes the click handler responsive as expected.

If I had to use v3.4.1 as is, I could swap the click for focus as the radios and checkboxes still receive focus. See this JSFiddle.

回答1:

I can't explain why it is working in JSFiddle, however it looks like the checkbox is essentially hiding behind the button. Are you going to be submitting this form, or just doing some jquery to the page based on selection? If it were me and you want to keep the buttons you can do this:

<form role="form" id="form">
  <div class="form-group">
    <div>
      <div>
        <label for="fname">Name:</label>
      </div>
      <div id="fname" class="btn-group btn-group-toggle"  data-toggle="buttons">
        <label class="btn btn-primary" data-value="a">
          a
        </label>
        <label class="btn btn-primary" data-value="b">
          b
        </label>
        <label class="btn btn-primary" data-value="c">
          c
        </label>
      </div>
    </div>
  </div>
</form>
        <script>
        $(function() {
    
  $('#fname label').click(function() {
    console.log('you clicked '+$(this).data('value'))
  });

});
        </script>

回答2:

I tried to interpret your question as best as I could. Here's my jsfiddle: https://jsfiddle.net/wqse25vj/ I hope it helps.

The hardest part of being a programmer is asking questions. "A problem well-stated is a problem half-solved." holds true. If this is not the answer you were looking for, refine your question and be sure to ask again. As a general note: remember to encapsulate your jQuery code in $(document).ready() and continue experimenting & learning HTML, CSS and Bootstrap. For example, I noticed your HTML label tag missing a for attribute, and a repetition of class names on your divs and input fields (hint: the Bootstrap class is required for the div only.). All the best to you!

Resources I used:

https://www.tutorialrepublic.com/faq/how-to-check-a-checkbox-is-checked-or-not-using-jquery.php
copy/pasted the inline-checkbox https://getbootstrap.com/docs/4.0/components/forms/

来源：https://stackoverflow.com/questions/62945761/onclick-for-bootstrap-btn-group-checkbox-works-in-jsfiddle-but-not-browser

标签

javascript

jquery

css

twitter-bootstrap

bootstrap-4