How prevent user to toggle a checkbox button created useing bootstrap buttongroups

Question

I created a boostrap buttongroup for checkboxes, like this:

<div class="btn-group" data-toggle="buttons">
    <label class="btn btn-default"><input type="checkbox" id="d1" />1</label>
    <label class="btn btn-default"><input type="checkbox" id="d2" />2</label>
    <label class="btn btn-default"><input type="checkbox" id="d3" />3</label>
    <label class="btn btn-default"><input type="checkbox" id="d4" />4</label>
    <label class="btn btn-default"><input type="checkbox" id="d5" />5</label>
    <label class="btn btn-default"><input type="checkbox" id="d6" />6</label>
</div>

I would like to disable some of them using Js. I already tried:

$("#d2").attr("locked", true);
$("#d2").attr('disabled', true);
$("#d2").parent().attr('disabled', true);
$("#d2").parent().addClass('disabled');

It shows button as disabled HOWEVER it does not removes the functionality of it. when I click it still toggles the active state.

Disabled button 2

Disabled button 2 after click

How can I prevent user to toggle it? Here are an snippet exemple of this issue.

$("#d2").prop("checked", false);
$("#d2").prop("locked", true);
$("#d2").prop("disabled", true);
$("#d2").parent().prop('disabled', true);

.active {
  background-color: green!important;
  color: white!important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />


<div class="btn-group" data-toggle="buttons">
  <label class="btn btn-default"><input type="checkbox" id="d1" />1</label>
  <label class="btn btn-default"><input type="checkbox" id="d2" />2</label>
  <label class="btn btn-default"><input type="checkbox" id="d3" />3</label>
  <label class="btn btn-default"><input type="checkbox" id="d4" />4</label>
  <label class="btn btn-default"><input type="checkbox" id="d5" />5</label>
  <label class="btn btn-default"><input type="checkbox" id="d6" />6</label>
</div>

@Prajwal, adding disabled class don't turns off toggle functionality — Daniel Santos, May 25 '17 at 17:47
https://stackoverflow.com/questions/155291/can-html-checkboxes-be-set-to-readonly — Prajwal, May 25 '17 at 17:53

score 0 · Accepted Answer · answered May 25 '17 at 19:11

0

You can try:

$("#d2").prop('disabled', true);

This works for me.

answered May 25 '17 at 19:11

sergioBertolazzo

585
2
11
27

sorry. it doesn't works. Take a look at the snippet. – Daniel Santos May 25 '17 at 20:19

How prevent user to toggle a checkbox button created useing bootstrap buttongroups

1 Answers1