只允許使用複選框網格的矩形選擇

假設我的客戶在主頁上有一個方形空間，他們可以上傳可放置在網格中任意數量框上的圖像。

箱的圖像應占據的選擇看起來是這樣的：

<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

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，但是，可以選擇使用常量更改大小。

來源

2017-02-20 marekpw

我算.... 28種...有效組合。這是一個足夠小的域，您可以對有效組合進行硬編碼。如果你的網格是30x30（例如）這不是一個有效的選項，你需要一個算法，但是對於這個小的域ID只是放棄和硬編碼有效的。 – Jamiec

我想過那個。從技術上講，網格大小將始終爲4x2，但未來不一定不可能改變。最壞的情況下，如果沒有人有更好的主意，我可能只是硬編碼。 – marekpw

有一些聰明的方法可以「硬編碼」它，這樣您就可以輕鬆地在將來添加規則 - 爲您解答問題 – Jamiec

鑑於含有有效的「索引」數組的數組 - 作爲一個例子（不完全的）

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

來源

2017-02-20 17:03:11 Jamiec

謝謝！這似乎很好。 – marekpw

只允許使用複選框網格的矩形選擇

回答

相關問題