嵌套的 onclick 功能启用和禁用 - jquery

Question

我有这三个 div，我正试图让其中至少两个先工作。所有 divs 从一开始就被禁用。如果单击第一个 div，div 将启用所有输入，依此类推。如果第一个 div 未启用，则第二个和第三个 div 无法启用。如果单击第一个 div 启用它，则可以启用或禁用第二个 div。如果第一个和第二个 div 都启用，则单击第一个 div 将其禁用，然后第二个 div 也将被禁用。

现在我能做的是如果我启用第一个 div 然后我可以启用第二个 div 但是如果我禁用第一个 div 第二个 div 仍然可以自行启用/禁用，但我想要的是没有启用第一个 div 第二个 div 根本无法启用，这将继续到第三个 div 以后可能会更多。

人们可以帮我看看我应该在我的代码中更改什么才能让它工作吗？

$(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);
    }
});

在此先感谢。

编辑对不起，我遗漏了最重要的部分。除了 divs，divs 还有其他 divs 不是子级可能是兄弟姐妹，甚至更深的 divs 与单击时位于同一列中div1 随后将启用/禁用同一列

Answer 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');
});

查看实际效果：http://jsfiddle.net/7b9eh573/

--

UPDATE 除了使用reduce，你还可以使用Array.prototype.every()。它稍微简化了代码，并且使这一步比使用 reduce 更清晰。

嵌套的 onclick 功能启用和禁用 - jquery

nested onclick function enable and disabling - jquery

html

jquery

nested

onclick