jQuery - if else click event

Question

I'm pretty new to jQuery and just playing around right now. I'm trying to create a click event which has to the the attribute 'disabled' for a <select></select> to true/false whenever it's clicked.

So it's starting on disabled[true] and when clicking on a link it's going to disabled[false] - cool. But now I wan't to make it possible to set it back to disabled[true] with the same link.

My code is as following:

$('.enableSelects').click(function(){
    if($('select').is(':hidden')){
        $('select').attr('disabled', true);
    } else {
        $('select').attr('disabled', false);
    }
});

The :hidden selector literally means it is hidden and not disabled. Try if($('select').attr('disabled')==false) instead. — Tim Withers
– Tim Withers, Commented Mar 6, 2012 at 17:36
@Yoshi Hey Yoshi. Could you throw an answer and describe the code a bit please? — skolind
– skolind, Commented Mar 6, 2012 at 17:43

Yoshi · Accepted Answer · 2012-03-06 18:06:54Z

3

regarding the short version:

$('.enableSelects').click(function(){
    $('select').prop('disabled', !$('select').prop('disabled'));
});

starting with:

$('select').prop('disabled', !$('select').prop('disabled'));
//          |                ||__________________________|
//          |                |  |
//          |                |  |_1) this will be evaluated first, resulting
//          |                |       in either 'true' or 'false'
//          |                |
//          |                |____2) the boolean value from above will then
//          |                        be inverted, and this new value will be
//          |                        used as the new value for disabled,
//          |                        which is then assigned
//          |
//          |_____________________3) using the 'prop' method

a slightly better version:

$('.enableSelects').click(function(){

    //                            |-- 1) this function gets called by jQuery
    //                            |      automatically. The index and the current
    //                            |      value will be passed to it.
    //                            |      The return value will be assigned to the
    //                            |      property.
    //                            |
    $('select').prop('disabled', function (idx, current) {

       // we're returning the inverted current value
       return !current;

    });
});

it's basically the same as above, but we're reducing the number of selectors which have to be evaluated.

http://jsfiddle.net/k3sb8/1/

edited Mar 6, 2012 at 18:06

answered Mar 6, 2012 at 17:54

Yoshi

54.8k14 gold badges93 silver badges108 bronze badges

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

9 Comments

skolind Over a year ago

Hm, I don't quite get it. But I'll get it in time when I'll played a bit with it my self :-)

skolind Over a year ago

Btw, I have to click the link 2 times before it'll react. How come?

Yoshi Over a year ago

@Kolind mhm, for me it works the first click, what browser are you using?

skolind Over a year ago

And one more thing - How do I change the value of my input[button] regarding it's disabled or not?

skolind Over a year ago

Chrome - your jsfiddle works perfect, but not when I've inserted to my own code. I think it's because my select's is set disabled as default?

|

Rob W · Accepted Answer · 2012-03-06 17:36:20Z

1

Use :disabled instead of :hidden, and prefer .prop() over .attr().

Also, your current method works fine when there's only one <select> in your document. Change the selector when you've got multiple <select> elements.

answered Mar 6, 2012 at 17:36

Rob W

350k87 gold badges811 silver badges683 bronze badges

4 Comments

skolind Over a year ago

I'll look at prop(). It's enabling both selects right now, isn't that good enough? What selector should I use for multiple select's?

Rob W Over a year ago

@Kolind If you want to select all <select>s, then your current code is fine. I just noted that, because it's a common mistake for novice jQuery users to use $('selector') with the intend of selecting one element, and then getting surprised that all elements are selected. For multiple <select>, you might want another solution though: See pastebin.com/NwsWvu7R. It switches the visibility for all individual <select> elements.

skolind Over a year ago

My intention was to enable all select on page. But then after a quick thought I don't wanna enable all select's on the page. I wanna pick the selects in the next div#editMain.. Is that possible?

Rob W Over a year ago

@Kolind That's possible. To answer that question, it's easier when you provide your DOM structure. Otherwise, adjust the realPrev jQuery plugin so that it becomes "realNext" ;)

Community · Accepted Answer · 2017-05-23 12:03:13Z

0

You might want to read up on .prop() vs .attr()

Try using prop() instead of attr()

Try using @Yoshi's fiddle from the comments: http://jsfiddle.net/k3sb8/

edited May 23, 2017 at 12:03

CommunityBot

11 silver badge

answered Mar 6, 2012 at 17:35

Naftali

147k41 gold badges247 silver badges304 bronze badges

Collectives™ on Stack Overflow

jQuery - if else click event

3 Answers 3

9 Comments

4 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

9 Comments

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related