User should not be able to select the button which is already selected

Question

Button group is not working as it should, the problem is if the "ON" is selected, it should not be selected again, but the problem is even the "ON" button is selected I am able to select the ON button again.

How can I stop my button to stop any action when the button is already selected.

This is my code for my button group:

<form action="myclass.php" method="post">
    <div class="btn-group" data-toggle="buttons">
        <label class="btn btn-default btn-xs myOnbutton">
            // myOnbutton is the button name
            <input type="radio" autocomplete="off"> ON
        </label>
        <label class="btn btn-default btn-xs myOffbutton">
            // myOffbutton is the button name
            <input type="radio" autocomplete="off"> OFF
        </label>
    </div>
</form>

Do anyone knows where I am making the mistake, so it is selecting the button again.

check this one http://stackoverflow.com/questions/19102946/bootstrap-radio-button-checked-flag — Gayan, Aug 10 '15 at 09:06
@user1234 Yes more or less the same, when the button is selected it should be disable to select again :) — Istiak Mahmood, Aug 10 '15 at 09:24
if you have problem in grouping, you can use same `name` attribute in your input `HTML` but if you want inputs to be disabled, you can see my answer. — Shirin Abdolahi, Aug 10 '15 at 09:26

Shirin Abdolahi · Answer 1 · 2015-08-10T09:32:33.437

0

if you want to disable the groups after first selection,you should use jquery like Plunker :

 $(".btn-xs :radio").click(function(){
  $(".btn-xs :radio").attr("disabled", true); //Disable all with the same name
});

and if you want to disable selected radio button only,Plunker :

$(".btn-xs :radio").click(function(){
  $(this).attr("disabled", true); //Disable all with the same name
});

edited Aug 10 '15 at 09:32

answered Aug 10 '15 at 09:05

Shirin Abdolahi

1,047
8
18

thanks for your answer, but i do not want to disable the group, i want to disable the button after selecting ... – Istiak Mahmood Aug 10 '15 at 09:26
instead of `$(".btn-xs :radio").attr("disabled", true);` use `$(this).attr("disabled", true);` to disable selected button @ChristoferHansen – Shirin Abdolahi Aug 10 '15 at 09:28
@ChristoferHansen your welcome, if it helped you,you can check my answer as a correct one, I updated my answer ;) – Shirin Abdolahi Aug 10 '15 at 09:34
@ChristoferHansen if you be clearer about what you want maybe I can help you,can you create plunker or someother thing to show me what you have already? – Shirin Abdolahi Aug 10 '15 at 09:38
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/86590/discussion-between-christofer-hansen-and-shirin-abdolahi). – Istiak Mahmood Aug 10 '15 at 09:42

score 0 · Answer 2 · answered Aug 10 '15 at 09:24

This is basic HTML. It has nothing to do with bootstrap, you just need to add names to the checkboxes so you cant select both.

<label class="btn btn-default btn-xs myOnbutton">
    <input type="radio" autocomplete="off" name="switch"> ON
  </label>
  <label class="btn btn-default btn-xs myOffbutton">
    <input type="radio" autocomplete="off" name="switch"> OFF
  </label>

User should not be able to select the button which is already selected

2 Answers2