javascript - 仅允许使用复选框网格选择矩形

Question

抱歉，这个令人困惑的标题，我真的想不出更好的了。

假设我的客户在其主页上有一个方形空间，他们可以在其中上传图像，这些图像可以放置在网格中任意数量的框中。

图像应占据的框的选择如下所示:

<div class="row">
    <div class="grid-position">
        <input type="checkbox" name="position[1]" disabled>
    </div>
    <div class="grid-position">
        <input type="checkbox" name="position[2]" disabled>
    </div>
    <div class="grid-position">
        <input type="checkbox" name="position[3]">
    </div>
    <div class="grid-position">
        <input type="checkbox" name="position[4]">
    </div>
</div>
<div class="row">
    <div class="grid-position">
        <input type="checkbox" name="position[5]">
    </div>
    <div class="grid-position">
        <input type="checkbox" name="position[6]">
    </div>
    <div class="grid-position">
        <input type="checkbox" name="position[7]">
    </div>
    <div class="grid-position">
        <input type="checkbox" name="position[8]">
    </div>
</div>

https://jsfiddle.net/17zt26wb/4/

但是，由于图像只能是矩形，我想阻止他们选择这样的东西:

X - X - O - O

X - O - O - O

var Selection = {p1: true, p2: true, p3: false, p4: false, p5: true, p6: false, p7: false, p8: false};

或者:

O - O - X - X

X - O - O - O

var Selection = {p1: false, p2: false, p3: true, p4: true, p5: true, p6: false, p7: false, p8: false};

但是，这是有效的:

X - O - O - O

O-O-O-O

var Selection = {p1: true, p2: false, p3: false, p4: false, p5: false, p6: false, p7: false, p8: false};

或者:

O - X - X - X

O - X - X - X

var Selection = {p1: false, p2: true, p3: true, p4: true, p5: false, p6: true, p7: true, p8: true};

等等

我需要帮助找出如果所选复选框代表正方形/矩形则返回真/假的算法。这可以用 Javascript 完成，但这并不重要 - 我只需要一些东西来开始，我会自己将它移植到我的语言中。

在 fiddle 中，前两个复选框被禁用，因为图像已经占据了这两个 block 。 selection 对象中 p1 和 p2 的值始终为 false。

这可能吗？我可能只是不关心验证，但如果有的话那就太好了。

编辑:澄清一下，网格大小应始终保持为 4x2，但是，如果能够选择使用常量更改大小，那就太好了。

Answer 1

给定包含有效“索引”的数组数组 - 作为示例(不完整)

// box 5 and 6 alone are valid. 
// 5 & 6 in combination is valid. 
// 3,4,7,8 in combination is valid
// TODO: Add all other valid combinations
var validCombinations = [[5],[6],[5,6],[3,4,7,8]];

您可以使用如下算法。请注意，这是“硬编码”有效组合，而不是使用真正的算法来确定选择是否为矩形。

var validCombinations = [[5],[6],[5,6],[3,4,7,8]];

function isAll(input){
    var $checkedBoxes = $(':checkbox:checked');
    return $checkedBoxes.length == input.length 
             && input.every(function(i){          
                    return $("[name='position[" + i + "]']:checkbox:checked").length;
                })
}

$(':checkbox').click(function(){
   var isValid = validCombinations.some(function(x) { return isAll(x);})
   console.log("Selection is valid?",isValid)
})

.row {
	margin-bottom: 4px;
}

.row .grid-position {
	display: inline-block;
	background-color: #aaa;
	padding: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
    <div class="grid-position">
        <input type="checkbox" name="position[1]" disabled>
    </div>
    <div class="grid-position">
        <input type="checkbox" name="position[2]" disabled>
    </div>
    <div class="grid-position">
        <input type="checkbox" name="position[3]">
    </div>
    <div class="grid-position">
        <input type="checkbox" name="position[4]">
    </div>
</div>
<div class="row">
    <div class="grid-position">
        <input type="checkbox" name="position[5]">
    </div>
    <div class="grid-position">
        <input type="checkbox" name="position[6]">
    </div>
    <div class="grid-position">
        <input type="checkbox" name="position[7]">
    </div>
    <div class="grid-position">
        <input type="checkbox" name="position[8]">
    </div>
</div>