Disable remaining buttons when one is clicked

Question

I have buttons that display a form when clicked. I'm currently trying to figure out how to disable the other buttons once one button is already clicked, to prevent multiple forms from showing. I'm not good at javascript so I appreciate any help I may receive.

For example here are are 2 of my buttons that will display a form.

<button type="button" class="fbutton" id="formButton">1</button>
<button type="button" class="fbutton" id="formButton2">2</button>

Here is the javascript function to to display the forms, when the button is clicked.

$("#formButton").click(function () {
$("#form1").toggle();
});

$("#formButton2").click(function () {
$("#form2").toggle();
});

Possible duplicate of [jQuery disable/enable submit button](https://stackoverflow.com/questions/1594952/jquery-disable-enable-submit-button) — Andrew, Jun 18 '18 at 18:43

score 0 · Answer 1 · answered Jun 18 '18 at 18:35

0

you can try this disable button after submit But the type of your button is button. So, change to $('form').submit(function() { $(this).find("button[type='button']").prop('disabled',true); });

answered Jun 18 '18 at 18:35

Duc Nguyen

530
8
16

Harsha · Answer 2 · 2018-06-18T18:44:43.877

0

You can try This

 <button type="button" onclick="document.getElementById('formButton').disabled=true;document.getElementById('formButton2').disabled=false;" class="fbutton" id="formButton">1</button>
<button type="button" onclick="this.disabled=true;document.getElementById('formButton').disabled=false;" class="fbutton" id="formButton2">2</button>

edited Jun 18 '18 at 18:44

answered Jun 18 '18 at 18:38

Harsha

176
1
16

score 0 · Accepted Answer · answered Jun 18 '18 at 18:42

You could try something like this:

$("#formButton").click(function () {
if($('#formButton2').prop("disabled")) {
    $('#formButton2').attr("disabled", false);
  } else {
    $('#formButton2').attr("disabled", true);
  }
$("#form1").toggle();
});

$("#formButton2").click(function () {
if($('#formButton').prop("disabled")) {
    $('#formButton').attr("disabled", false);
  } else {
    $('#formButton').attr("disabled", true);
  }
$("#form2").toggle();
});

This will disable the opposite button upon clicking, and re-enable it upon clicking again.

Happy to help! Could you select my answer as the correct answer? Cheers. — Samsimus12, Jun 18 '18 at 19:39

score 0 · Answer 4 · answered Jun 18 '18 at 18:53

Something like this should work

$("#formButton").click(function() {
  $("#form1").toggle();
  $("#formButton2").prop('disabled', !$("#formButton2").prop("disabled"))
});

$("#formButton2").click(function() {
  $("#form2").toggle();
  $("#formButton").prop('disabled', !$("#formButton").prop("disabled"))
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button type="button" class="fbutton" id="formButton">1</button>
<button type="button" class="fbutton" id="formButton2">2</button>

<form id="form1" style="display:none">
  <h1>Form 1</h1>
</form>

<form id="form2" style="display:none">
  <h1>Form 2</h1>
</form>

Louys Patrice Bessette · Answer 5 · 2018-06-18T19:09:29.067

In this kind of cases, I often suggest the use of the .data() method.

I sligthly changed the HTML markup in order to add a data-* attribute.

So on click, the script retreives the value needed to complete the "target" id of the element to show.

About the disabling of any other button, the .not(this) filters out the actual clicked button from the collection to disable.

$(document).ready(function(){
  $(".fbutton").on("click",function(){
    var target = $(this).data("formid");
    console.log(target);
    
    $(".fbutton").not(this).prop("disabled",true);
    $("#form"+target).show();
  });
});

form[id^='form']{
  display:none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>

<button type="button" class="fbutton" data-formid="1">1</button>
<button type="button" class="fbutton" data-formid="2">2</button>

<form id="form1">Form #1</form>
<form id="form2">Form #2</form>

Notice that the above script will work for as many button/form pairs as you wish without the need to add more lines.

score 0 · Answer 6 · answered Jun 18 '18 at 19:17

You can disable all buttons except active one. You can add more functionalities inside button click event.

$('#formButton').off().on('click', function () { 
   $(".fbutton").each(function () {
       $(this).prop("disabled", true);
   });
    $(this).prop("disabled", false);
});

$('#formButton2').off().on('click', function () { 
   $(".fbutton").each(function () {
        $(this).prop("disabled", true);
   });
   $(this).prop("disabled", false);
});

score 0 · Answer 7 · answered Sep 20 '21 at 13:05

<!DOCTYPE html>
<html>
<body>
<button
    onclick="this.disabled=false;document.getElementById('down7913').disabled=true;"
    type="submit"
    class="positive"
    name="up7913"
    id="up7913"
  >
    First
  </button>

  <button
    onclick="this.disabled=false;document.getElementById('up7913').disabled=true;"
    type="submit"
    class="negative"
    name="down7913"
    id="down7913"
  >
    Second
  </button>

enter code here

</body>
</html>

Disable remaining buttons when one is clicked

7 Answers7