Question

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

现在我能做的就是如果我启用第一个div然后我可以启用第二个div但不知何故如果我禁用第一个div第二个div仍然可以自己启用/禁用但我想要的是没有让第一个div启用第二个div根本无法启用，这将继续到第3个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);
    }
});

先谢谢你。

修改的对不起，我遗漏了最重要的部分。除了div之外，div还有其他不是孩子的div可能是兄弟姐妹，甚至更深的div在同一列中，当点击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/

-

更新而不是使用reduce，您也可以使用Array.prototype.every()。它简化了代码，使得这一步骤比使用reduce更加清晰。

嵌套onclick函数启用和禁用 - jquery

1 个答案: