nested onclick function enable and disabling - jquery

Question

I have these three divs which I am trying to make at least 2 of them to work first. All divs are disabled from the start. if the 1st div is clicked, the div will be enabled with all it's inputs and so on. if 1st div is not enabled, the 2nd and 3rd div cannot be enabled. if 1st div is clicked which enables it then the 2nd div can be enabled or disabled. if both 1st and 2nd div is enabled then 1st div is clicked which disables it then the 2nd div will be disabled too.

right now what I am able to do is if I enable the 1st div I can then enable the 2nd div but somehow if I disable the 1st div the 2nd div still can be enabled / disabled by itself but what I want is without having 1st div to be enabled 2nd div cannot be enabled at all and this will go on to the 3rd div and maybe more later.

Can people give me a hand to see what I should change in my code for this to work?

$(twoSides).on('click', function(e){
    e.preventDefault();
    var disabledAttr = $(twoSides).attr('disabled');

    if(disabledAttr == 'disabled'){
        enableSides(twoSides,dimensionSideB,colorSideB,mountSideB);

        // if three sides is clicked
        $(threeSides).on('click', function(e){
            e.preventDefault();
            var disabledAttr = $(threeSides).attr('disabled');

            if(disabledAttr == 'disabled'){
                enableSides(threeSides,dimensionSideC,colorSideC,mountSideC);
                console.log(disabledAttr);
                console.log('three enabled');
            }else{
                disableSides(threeSides,dimensionSideC,colorSideC,mountSideC);
                console.log(disabledAttr);
                console.log('three disabled');
            }
        });
    }else{
        disableSides(twoSides,dimensionSideB,colorSideB,mountSideB);
        disableSides(threeSides,dimensionSideC,colorSideC,mountSideC);
    }
});

Thanks thanks in advance.

EDIT Sorry I left out the most important part. other than the divs, the divs have other divs that isn't child might be siblings or even deeper divs that's in the same column that when clicked div1 the same column would then be enabled / disabled

Joshua K · Accepted Answer · 2015-08-13 23:39:36Z

1

// deactivate all items at the beginning
$('.pages > div.page').attr('disabled',true);

// if one element is clicked...
$('.pages > div.page').click(function() {
    // get the index of the clicked element within the collection:
    var idx = $('.pages > div.page').index(this);
    // if the clicked element is enabled...
    if(!$(this).attr('disabled'))
        // ... select the clicked element and all its followed siblings and disable it. (the return stops the execution of this function. you can also use else {} instead of returning at this point)
        return $('.pages > div.page').slice(idx).attr('disabled',true);
    // check if it's the first element or all previous siblings are already enabled
    var allBeforeAreEnabled = idx===0 || $('.pages > div.page')
        .slice(0,idx) // select only the elements 0 till the clicked one
        .get() // convert the collection to an javascript array
        .reduce(function(previousValue, currentValue) {
            return previousValue && $(currentValue).attr('disabled')!=='disabled';
        }, true);
    // if all were enabled...
    if(allBeforeAreEnabled)
        // enable the clicked element
        $(this).removeAttr('disabled');
});

see it in action: http://jsfiddle.net/7b9eh573/

--

UPDATE instead of using reduce, you can also use Array.prototype.every(). It simplifies the code a little bit and it makes this step clearer than with reduce.

edited Aug 13, 2015 at 23:39

answered Aug 13, 2015 at 18:46

Joshua K

2,5371 gold badge12 silver badges15 bronze badges

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

6 Comments

Joshua K Over a year ago

please keep in mind: the disabled attribute is not valid as an attribute of elements other than form elements. so this is no valid html. but it works. I took the disabled property because you want it this way. better would be to use data-disabled or a different data attribute

Tsuna Over a year ago

I can pretty much understand what is going on here but just not sure how to implement into what I already have because I have other elements not in the same div but let's say one div opens the other divs in this column and so on and on. because the this only applied to this on click element. really sorry I guess I left one one of the most important part

Joshua K Over a year ago

@Tsuna no problem. the code works also with elements not in the same div. you only have to change the selector. or I didn't get the point. the position of the elements inside the DOM tree doesn't matter.

Tsuna Over a year ago

hummm let me show you what I have in the html. let me cut things down because there are quite lots of things in there let me see if I can focus on what I mean

Tsuna Over a year ago

it's acutally something like this in html shrib.com/vPCHPWg0iLcTekH?&v=nc

|

Collectives™ on Stack Overflow

nested onclick function enable and disabling - jquery

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related