CODEWITHSUNDEEP
htmlbuttontwitter-bootstrap-3
Istiak Mahmood
Istiak Mahmood

Reputation: 2422

disable the selected button

How to disable a button which is been selected. Suppose i have 2 buttons, "ON" & "OFF".

Now if the "ON" button is selected it shouldn't be allowed to select the "ON" button again until the "OFF button is being selected."

<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>

So the main purpose is to disable the button which is selected. Do anyone knows how to solve this problem ! Thanks in advanced.

Upvotes: 0

Views: 156

Answers (4)

Hopfeeyy
Hopfeeyy

Reputation: 7

Write your code like this:

<div class="btn-group" data-toggle="buttons">
  <input type="radio" name="toggle" value="on">ON</br>
  <input type="radio" name="toggle" value="off">OFF</br>
</div>

You don't need javascript or jQuery for this approach.

Upvotes: 0

Rupesh Jain
Rupesh Jain

Reputation: 328

Why dont you try this, if you are already using bootstrap - http://getbootstrap.com/javascript/#buttons-checkbox-radio

Upvotes: 0

Andrew Orlov
Andrew Orlov

Reputation: 512

Try this variant jsFiddle:

$(function () {
    var onButton = $(".btn-group .btn:eq(0)");
    var offButton = $(".btn-group .btn:eq(1)");

    onButton.on("click", function () {
        if (!onButton.is("disabled")) {
            offButton.attr("disabled", false);
            onButton.attr("disabled", true);
        }
    });
    offButton.on("click", function () {
        if (!offButton.is("disabled")) {
            onButton.attr("disabled", false);
            offButton.attr("disabled", true);
        }
    });
});

Upvotes: 1

Ivan Suftin
Ivan Suftin

Reputation: 101

// https://jsfiddle.net/243mbpwo/2/

var inputs = document.getElementsByTagName("input");
var onButton = inputs[0];
var offButton = inputs[1];

onButton.addEventListener("click", function () {
    this.setAttribute("disabled", "disabled");
});

offButton.addEventListener("click", function () {
    onButton.removeAttribute("disabled");
});

Upvotes: 0

Related Questions