how to disable button2 if button1 is clicked and disable button2 if button1 is clicked.

Question

I have code setup like so:

<form>
    <button id="button1">button1</button>
    <button id="button2">button2</button>
    <input type="submit" value="submit">
</form>

Initially how would I make my submit button disabled until either button1 or button2 is clicked?

The most important question is how to enable the disabled button while at the same time disabling the alternate button. This is so that the user can only submit one of the button's values and not both buttons.

I'm aware that I would use $('#button').attr("disabled", "disabled") to add the disabled attribute and also set the button by using $('#button').attr("disabled", true) or $('#button').attr("disabled", false). I'm also aware that .removeAttr method removes attributes however im unsure how to piece this all together. Any help would be much appreciated.

But how can to click button2 when its disabled on click of button1. — Nitin Varpe, Jun 17 '15 at 11:34
Ideally you should use radio inputs, as that's what they're for. Also, this isn't what buttons are for and people expect common behavior for common controls. — Reinstate Monica Cellio, Jun 17 '15 at 11:34
@Archer Could I hide the radio button so that my button design acts as a radio button if you get what I mean? — Billy, Jun 17 '15 at 11:44

Satpal · Accepted Answer · 2015-06-17T11:51:04.070

3

Assuming you need this.

$(function() {
    $("#button1, #button2").click(function(event){
      //Since <button> elements are submit buttons by default.
      event.preventDefault(); 
      
      //Enable other button
      $("#button1, #button2").not(this).prop('disabled', false);
      
      //Disable the current
      $(this).prop('disabled', true);
      
      //Enable submit
      $('#btnsubmit').prop('disabled', false);
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
    <button id="button1">button1</button>
    <button id="button2">button2</button>
    <input id="btnsubmit" type="submit" value="submit" disabled>
</form>

edited Jun 17 '15 at 11:51

answered Jun 17 '15 at 11:35

Satpal

132,252
13
159
168

Dont forget, he also wants the submit button initally disabled and then enabled after one of the two other buttons is clicked – AmmarCSE Jun 17 '15 at 11:37
Thanks @AmmarCSE or can you enable both buttons and not disable button2 and the submit button initially? – Billy Jun 17 '15 at 11:48
@Billy, Does this fulfills your requirement? If you don't want any button `disabled` remove the attribute – Satpal Jun 17 '15 at 11:50

Sai Deepak · Answer 2 · 2015-06-17T12:00:14.237

0

Try this one i have made out a fiddle. I have Made out both types of fiddles refer it

Fiddle for the button action

Fiddle2 Used code Snippet

    $("input[type='submit']").attr("disabled","disabled");
$("button").removeAttr("disabled");
    $("button").each(function(){
        $(this).click(function(){
            $(this).attr("disabled","disabled");
            $(this).siblings().removeAttr("disabled");
            $("input[type='submit']").removeAttr("disabled");
            return false;
        });        
    });

edited Jun 17 '15 at 12:00

answered Jun 17 '15 at 11:48

Sai Deepak

678
4
16

Thanks but with this code the button I click gets disabled – Billy Jun 17 '15 at 11:53
I have made another one take – Sai Deepak Jun 17 '15 at 12:00
@SaiDeepak, You should go through http://stackoverflow.com/questions/5874652/prop-vs-attr and also you don't need each when binding event – Satpal Jun 17 '15 at 12:01
@SaiDeepak no you've done the opposite of what I want. I wanted the alternative button disabled not the one I click – Billy Jun 17 '15 at 12:04
Check it out i have provided 2 fiddles just check both of them – Sai Deepak Jun 17 '15 at 12:07

score 0 · Answer 3 · answered Jun 17 '15 at 12:11

Try this, it also tells you which is disabled,

$(function() {
  $("#button1, #button2").click(function() {
    $("#button1, #button2").not(this).prop('disabled', false);
    $(this).prop('disabled', true);
  });

  $("form").on("submit", function() {
    alert("disabled button:" + $("input:disabled").attr("id"));


  });

});

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


<form>
  <input type="button" id="button1" disabled value="button1" />

  <input type="button" id="button2" value="button2" />

  <input type="submit" value="submit" />
</form>

how to disable button2 if button1 is clicked and disable button2 if button1 is clicked.

3 Answers3