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(); });

So reinventing radio buttons?

epascarello
– epascarello

2018-06-18 18:28:07 +00:00
Commented Jun 18, 2018 at 18:28 — epascarello
– epascarello, Commented Jun 18, 2018 at 18:28
So hide the other forms? $("form").not("#form1").hide()

epascarello
– epascarello

2018-06-18 18:29:13 +00:00
Commented Jun 18, 2018 at 18:29 — epascarello
– epascarello, Commented Jun 18, 2018 at 18:29
You may try tabs or accordion to show hide forms.

jagad89
– jagad89

2018-06-18 18:30:49 +00:00
Commented Jun 18, 2018 at 18:30 — jagad89
– jagad89, Commented Jun 18, 2018 at 18:30
Possible duplicate of jQuery disable/enable submit button

Andrew
– Andrew

2018-06-18 18:43:31 +00:00
Commented Jun 18, 2018 at 18:43 — Andrew
– Andrew, Commented Jun 18, 2018 at 18:43
I disagree with the suggested duplicate.

Louys Patrice Bessette
– Louys Patrice Bessette

2018-06-18 19:19:57 +00:00
Commented Jun 18, 2018 at 19:19 — Louys Patrice Bessette
– Louys Patrice Bessette, Commented Jun 18, 2018 at 19:19

Samsimus12 · Accepted Answer · 2018-06-18 18:42:22Z

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.

Duc Nguyen · Accepted Answer · 2018-06-18 18:35:37Z

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); });

Harsha · Accepted Answer · 2018-06-18 18:44:43Z

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>

WolfgangDeveloper · Accepted Answer · 2018-06-18 18:53:56Z

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 · Accepted Answer · 2018-06-18 19:09:29Z

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.

Pritam Jyoti Ray · Accepted Answer · 2018-06-18 19:17:56Z

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); });

Arnab Roy · Accepted Answer · 2021-09-20 13:05:00Z

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

Collectives™ on Stack Overflow

Disable remaining buttons when one is clicked

7 Answers 7

1 Comment

Comments

Comments

Comments

Comments

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

1 Comment

Comments

Comments

Comments

Comments

Comments

Comments

Linked

Related