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, Mar 06 '12 at 17:36
@Yoshi Hey Yoshi. Could you throw an answer and describe the code a bit please? — skolind, Mar 06 '12 at 17:43

Yoshi · Accepted Answer · 2012-03-06T18:06:54.337

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 06 '12 at 18:06

answered Mar 06 '12 at 17:54

Yoshi

54,081
14
89
103

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 Mar 06 '12 at 18:00
Btw, I have to click the link 2 times before it'll react. How come? – skolind Mar 06 '12 at 18:01
@Kolind mhm, for me it works the first click, what browser are you using? – Yoshi Mar 06 '12 at 18:04
And one more thing - How do I change the value of my input[button] regarding it's disabled or not? – skolind Mar 06 '12 at 18:05
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? – skolind Mar 06 '12 at 18:06
@Kolind I wouldn't think so. As add `disabled` to the select in the fiddle. It's also working. Maybe you can add some more of your code the the question. – Yoshi Mar 06 '12 at 18:09
I'm using the updated method you provided, and now it's working. No double clicking and so on. How do I change the value of my button regarding it's disabled or not? :) – skolind Mar 06 '12 at 18:11
Btw, you explanation of the updated version was a lot easier for me to understand, nice. :-) – skolind Mar 06 '12 at 18:13
Works just perfect! Damn, It's awesome :o) You'll get my check-mark :) – skolind Mar 06 '12 at 18:26

score 1 · Answer 2 · answered Mar 06 '12 at 17:36

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 06 '12 at 17:36

Rob W

341,306
83
791
678

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? – skolind Mar 06 '12 at 17:38
@Kolind If you want to select all ``, you might want another solution though: **See http://pastebin.com/NwsWvu7R**. It switches the visibility for **all** individual ` – Rob W Mar 06 '12 at 17:44
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? – skolind Mar 06 '12 at 17:49
@Kolind That's possible. To answer that question, it's easier when you provide your DOM structure. Otherwise, adjust the [`realPrev`](http://stackoverflow.com/a/7771241/938089?jquery-prev-of-a-type-regardless-of-its-parent-etc) jQuery plugin so that it becomes "realNext" ;) – Rob W Mar 06 '12 at 17:52

score 0 · Answer 3 · edited May 23 '17 at 12:03

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 '17 at 12:03

Community

1
1

answered Mar 06 '12 at 17:35

Naftali

144,921
39
244
303

jQuery - if else click event

3 Answers3