Boostrap prevents jQuery from changing checkbox' state

Question

I'm using bootstrap 3.3.6 to make my web server (tornado setup) look more professional. However, now that I'm trying to load defaults from a JSON file, the checkboxes are stuck with their initial values. Changing the corresponding value in the JSON file has no effect. I know the issue is with Bootstrap because commenting out the three lines of the "Configure Reorder switch" section fixes my issue. I'm fairly new to java and web development so please bear with me.

A normal checkbox can be unchecked using:

$('#reorderButton').prop('checked', false);

But that won't work with Bootstrap. I tried all kinds of permutations on that theme before searching online specifically for bootstrap/checkbox not working. No shortage of posts on here but I must be missing the forest for all the trees, after trying to find my solution through these posts:

Bootstrap Checkbox not working in nav-pills

Bootstrap Checkbox is not working properly

checkbox doesn't (check/uncheck) work inside bootstrap tab-pane

Bootstrap doesn't use "checked" attribute of checkbox

Toggle checkbox on Twitter Bootstrap

I tried condensing my code down and putting it on fiddle, but I wasn't successful, so here's the relevant code from the different files.

My html:

  <tr>  
    <td>  
      <th>Reorder&nbsp;</th>
    </td>
    <td>
      <div class="row sidebar-row vertical-align">
        <div class="col-xs-7">
          <input type="checkbox" id='reorderButton' name="reorder_enable" data-size="small" >
        </div>
      </div>
    </td>
  </tr>

My .js file:

// Configure Reorder switch
$("[name='reorder_enable']").bootstrapSwitch();
$("[name='reorder_enable']").bootstrapSwitch('state', reorder_enable, true);
$('input[name="reorder_enable"]').on('switchChange.bootstrapSwitch', function(event,state) {
    changeReorderEnable();
});
// <SNIP>
var changeReorderEnable = function()
{
    reorder_enable = $("[name='reorder_enable']").bootstrapSwitch('state');
    $.ajax({
        type: "PUT",
        url: server_url + 'reorder',
        contentType: "application/json",
        data: JSON.stringify({"enable": reorder_enable})
    });
};
// <SNIP>
console.log("Let's try and change reorderButton..");
$('#reorderButton').prop('checked', false);

-- EDIT: CSS --

I've done very little work with CSS, none of my additions has an impact on the above code snippets (AFAIK). I've included the stylesheets that comes with this version of bootstrap:

<link href="js/bootstrap-3.3.6-dist/css/bootstrap.min.css" rel="stylesheet">
<link href="css/my-server.css" rel="stylesheet">
<!-- Bootstrap -->
<link href="js/bootstrap-3.3.6-dist/css/bootstrap.min.css" rel="stylesheet">
<link href="js/bootstrap-3.3.6-dist/css/bootstrap-switch.min.css" rel="stylesheet">
<link href="js/bootstrap-slider-10.2.1/css/bootstrap-slider.css" rel="stylesheet">
<link href="js/bootstrap-slider-10.2.1/css/bootstrap-slider.min.css" rel="stylesheet">

I'm trying to put together a jsfiddle to illustrate this, but I can't find the appropriate paths for loading ```bootstrap-switch``` and ```bootstrap-slider``` online. — PhilPhil, Jan 04 '19 at 08:54
I.e. to turn from loading them locally: `````` into loading them with a url: `````` — PhilPhil, Jan 04 '19 at 08:56

score 0 · Accepted Answer · answered Jan 04 '19 at 11:46

I figured it out. jQuery changes a checkbox' state like this:

$('#id').prop('checked', value);

But Bootstrap apparently doesn't touch that property, instead (in my case) requiring:

$("[name='reorder_enable']").bootstrapSwitch('state', reorder_enable, true);

Where reorder_enable sets the state of the checkbox. The final argument true, does not affect the checkbox' state.

Boostrap prevents jQuery from changing checkbox' state

1 Answers1