CODEWITHSUNDEEP
javascripthtml
Kriskevz23
Kriskevz23

Reputation: 19

How do I disable multiple buttons when I click a button

    <script type="text/javascript">
        function button1() {
            var elem = document.getElementById("button1");
            if (elem.value=="Choose") elem.value = "Selected";
            else elem.value = "Choose";
        }
        function button2() {
            var elem = document.getElementById("button2");
            if (elem.value=="Choose") elem.value = "Selected";
            else elem.value = "Choose";
        }
        function button3() {
            var elem = document.getElementById("button3");
            if (elem.value=="Choose") elem.value = "Selected";
            else elem.value = "Choose";
        }
        function button4() {
            var elem = document.getElementById("button4");
            if (elem.value=="Choose") elem.value = "Selected";
            else elem.value = "Choose";
        }
        function button5() {
            var elem = document.getElementById("button5");
            if (elem.value=="Choose") elem.value = "Selected";
            else elem.value = "Choose";
        }

    </script>

How do disable all the buttons if I select one button. Do I have to disable all the buttons one by one or is there a way to do all the buttons.

Upvotes: 0

Views: 1626

Answers (2)

Praveen Kumar Purushothaman
Praveen Kumar Purushothaman

Reputation: 167162

Alright, with whatever you have given, maybe you're looking for something like a radio button. I am using Bootstrap and jQuery - it's much easier than vanilla JavaScript to achieve something that you're trying to do:

$(function () {
  $(".btn").click(function () {
    $(".btn").prop("disabled", true);
    $(this).prop("disabled", false).addClass("active");
    $("p").text("You have clicked on button #" + $(this).data("id") + ".");
    $(this).text("Selected");
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous" />
<div class="p-5">
  <button class="btn btn-primary button-1" data-id="1">Choose 1</button>
  <button class="btn btn-primary button-2" data-id="2">Choose 2</button>
  <button class="btn btn-primary button-3" data-id="3">Choose 3</button>
  <button class="btn btn-primary button-4" data-id="4">Choose 4</button>
  <button class="btn btn-primary button-5" data-id="5">Choose 5</button>
  <p id="status" class="py-3"></p>
</div>

On clicking of any button above, the respective button will be activated and the others will be disabled.

Resetting...

Option One: Using the same button!

$(function () {
  $(".btn").click(function () {
    if ($(this).hasClass("active")) {
      $(".btn").prop("disabled", false);
      $("p").text("");
      $(this).text("Choose " + $(this).data("id"));
    } else {
      $(".btn").prop("disabled", true);
      $(this).prop("disabled", false).addClass("active");
      $("p").text("You have clicked on button #" + $(this).data("id") + ".");
      $(this).text("Selected");
    }
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous" />
<div class="p-5">
  <button class="btn btn-primary button-1" data-id="1">Choose 1</button>
  <button class="btn btn-primary button-2" data-id="2">Choose 2</button>
  <button class="btn btn-primary button-3" data-id="3">Choose 3</button>
  <button class="btn btn-primary button-4" data-id="4">Choose 4</button>
  <button class="btn btn-primary button-5" data-id="5">Choose 5</button>
  <p id="status" class="py-3"></p>
</div>

Option Two: Using a Cancel Button

$(function () {
  $(".btn-primary").click(function () {
    $(".btn-primary").prop("disabled", true);
    $(this).prop("disabled", false).addClass("active");
    $(".btn-info").prop("disabled", false);
    $("p").text("You have clicked on button #" + $(this).data("id") + ".");
    $(this).text("Selected");
  });
  $(".btn-info").click(function () {
    $(".btn").prop("disabled", false);
    $("p").text("");
    $(".btn-primary").text(function () {
      return "Choose " + $(this).data("id");
    });
    $(this).prop("disabled", true);
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous" />
<div class="p-5">
  <button class="btn btn-primary button-1" data-id="1">Choose 1</button>
  <button class="btn btn-primary button-2" data-id="2">Choose 2</button>
  <button class="btn btn-primary button-3" data-id="3">Choose 3</button>
  <button class="btn btn-primary button-4" data-id="4">Choose 4</button>
  <button class="btn btn-primary button-5" data-id="5">Choose 5</button>
  <p id="status" class="py-3"></p>
  <button class="btn btn-info" disabled>Cancel</button>
</div>

I hope the above two solutions are something that you're looking for! 😁

Upvotes: 1

E-telier
E-telier

Reputation: 821

Always avoid repetitive code.

By "disabling all buttons", I guess you mean set their value back to "Choose".

<script type="text/javascript">
    function buttonBehavior(num) {
        // reset all buttons
        let i=1;
        while(document.getElementById("button"+i)!==null) {
             document.getElementById("button"+i).value = 'Choose';
             i++;
        }
        // set selected button
        var elem = document.getElementById("button"+num);
        if (elem.value=="Choose") elem.value = "Selected";
        else elem.value = "Choose";
    }
</script>

Upvotes: 0

Related Questions