Disabling button with Jquery Or Javascript When some other button was clicked

Question

i have these two buttons and i want one of them to be disabled when the other was clicked.

There is html

    <button type="submit" id="button_user" name="submit" class="btn btn-small btn-primary" data-toggle="collapse" data-target="#fsearch">Pretraga terena na sajtu</button>
  <button type="submit" id="button_field" name="submit" class="btn btn-small btn-primary" data-toggle="collapse" data-target="#usearch">Pretraga korisnika na sajtu</button>

I have managed to do this with two functions and onclick, but i would like to know is there any elegant way to do this in one function so that inline js can be avoided?

this is my js:

$(document).ready(function(){


disable_one = function(){
    if($('button_user').data('clicked', true)){
        $('#button_field').attr("disabled", "disabled");
        return;
    }
};
disable_two = function(){
    if($('button_field').data('clicked', true)){
        $('#button_user').attr("disabled", "disabled");
        return;
    }
};


});

If you don't absolutely need buttons, use radio elements.

Organiccat
– Organiccat

2013-04-01 21:09:08 +00:00
Commented Apr 1, 2013 at 21:09 — Organiccat
– Organiccat, Commented Apr 1, 2013 at 21:09

j08691 · Accepted Answer · 2013-04-01 21:07:54Z

2

Using jQuery:

$('.btn.btn-small.btn-primary').click(function () {
    $('.btn.btn-small.btn-primary').not($(this)).prop('disabled', true)
});

jsFiddle example

answered Apr 1, 2013 at 21:07

j08691

208k33 gold badges269 silver badges281 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Luke Peters · Accepted Answer · 2013-04-01 21:10:49Z

1

$('#button_user').on('click', function() {
    $('#button_field').attr('disabled', 'disabled');
});

Working example: http://jsfiddle.net/BPZT7/

answered Apr 1, 2013 at 21:10

Luke Peters

314 bronze badges

Comments

Johan Sundén · Accepted Answer · 2013-04-01 21:22:06Z

0

Bind a Jquery click event to the button class and then us the target property with the Jquery is method (http://api.jquery.com/is/).

 $("your button class").click(function(e) {
    if($(e.target).is("#button_user")) {
        //Disable button_field
    } else {
        // Disable button_user
    }
})

answered Apr 1, 2013 at 21:22

Johan Sundén

4474 silver badges9 bronze badges

Comments

m1k1 · Accepted Answer · 2013-04-02 13:52:46Z

0

This is how i managed to do this very simple and clear. Now, if the visitor change his mind this button is enabled so that he can choose again.

    $(document).ready(function(){

$('#button_user').click(function () {
    if (button_field.disabled==false){
        button_field.disabled = true;
    }
    else {
    button_field.disabled = false ;
    } 
});
$('#button_field').click(function () {
    if (button_user.disabled==false){
        button_user.disabled = true;
    }
    else {
    button_user.disabled = false ;
    } 
});


});

answered Apr 2, 2013 at 13:52

m1k1

1531 gold badge2 silver badges13 bronze badges

Collectives™ on Stack Overflow

Disabling button with Jquery Or Javascript When some other button was clicked

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related