Bootstrap 3 radio requires double clicking

Question

On my webpage, I've got a question requiring one answer out of 3 possible choices. But implementing 3 radio (buttons) using Bootstrap 3, I either get no event generated or 2 events generated. If I click on the named label of any of the radio buttons (e.g. "ON" or "OFF"), the button changes but no event is generated. But if I click on the blank half of the radio button, 2 events are generated as the button changes.

This post should answer half of my problem, about the event being triggered twice: Bootstrap 3 Radio Buttons Double Toggling But try as I might, going through my Bootstrap JavaScript files I can't see that I'm using any other version of Bootstrap besides version 3.

I've also read answers where the event listener is doubled up (explaining why they are triggered twice), but that's not the case in my JavaScript as far as I can see.

I've distilled my code and put it on this jsfiddle. Note that this fiddle only generate 1 event per click. I've not been able to find the online URL for all of my .js files. I'd appreciate if anyone could help me find the last missing one: (I have local copies on my machine)

https://fiddle.jshell.net/_display/js/bootstrap-switch/main.js

I know it's not entirely helpful that it doesn't fully replicate the issue, but if someone could help me find the URLs for the above javascript files, that should hopefully help me.

I'm looking to get 1 event reliably generated independently of which half of a radio (button) I click on. If I do away with bootstrap, events are generated each time I click, but there's still 2 events generated for each click..

Answer 1

You just call the bootstrap switch two time; one in your main.js file as;

$("input[type=\"checkbox\"], input[type=\"radio\"]").not("[data-switch-no-init]").bootstrapSwitch();

The second one in your index.js that you made on the stackblitz for each radio button. So when you try to switch the radios the change event fired twice.

For the solution:

I just comment out bootstrap-switch line in the main.js file to not to lose the control over the radios and for a simplest usage update the index.html and index.js files as below;

Index.html

<table class="overall-table" align="center">
   <thead></thead>
   <tbody>
     <tr>
        <td><th>Choice: None / Add / Dis:&nbsp;</th></td>
        <td></td>
        <td>
           <input id="cbox1" name="GroupedSwitches" class="bootstrap-switch" type="radio" data-off-text="OFF" data-on-text="ON" checked="true" value="none">
           <input id="cbox2" name="GroupedSwitches" class="bootstrap-switch" type="radio" data-off-text="OFF" data-on-text="ON" checked="false" value="add">
           <input id="cbox3" name="GroupedSwitches" class="bootstrap-switch" type="radio" data-off-text="OFF" data-on-text="ON" checked="false" value="dis">
        </td>
      </tr>
   </tbody>
</table>

Index.js

$( document ).ready(function()
{
    $(".bootstrap-switch").bootstrapSwitch({
        'size': 'midi',
        'onSwitchChange': function(event, state){
            console.log("event", event);
            console.log("state", state);
            console.log("this", this); //this mean the checked radio in here
            console.log("checked radio value", $(this).val());
            // Do your logic in here according to the value 
            // if..else..
        }
    });
});

Btw, you do not need a form element for the determining the checked event, the switcher made it for you :)

Hope this helps.