只允许使用复选框网格的矩形选择

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 - ○ - ○

X - O - ○ - ○

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

OR：

○ - ○ - X - X

X - O - ○ - ○

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

然而，这是有效的：

X - O - O - O

○ - ○ - ○ - ○

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

OR：

Ø - X - X - X

Ø - X - X - X

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

等

我需要帮助搞清楚和算法，如果选定的复选框代表方形/矩形，将返回true/false。这可以在Javascript中完成，但它并不重要 - 我只需要开始，我将自己将其移植到我的语言。

在小提琴中，前两个复选框被禁用，因为图像已经占据了这两个块。在选择对象中的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 { 
 
\t margin-bottom: 4px; 
 
} 
 

 
.row .grid-position { 
 
\t display: inline-block; 
 
\t background-color: #aaa; 
 
\t 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>