Question

基本上，我使用纯JS创建一个复选框范围。我无法弄清楚，如何使检查范围无法取消选中。例如，您检查 2 和 5 。因此，无法取消选中数字 3 和 4 ，但可以取消选中 2 和 5 。

<ul>
<li><input type="checkbox" value="1">One</input></li>
<li><input type="checkbox" value="2">Two</input></li>
<li><input type="checkbox" value="3">Three</input></li>
<li><input type="checkbox" value="4">Four</input></li>
<li><input type="checkbox" value="5">Five</input></li>
<li><input type="checkbox" value="6">Six</input></li>
<li><input type="checkbox" value="7">Seven</input></li>
</ul>


// JavaScript
var el = document.getElementsByTagName("input"); 
var lastChecked = null;

// Iterate through every 'input' element and add an event listener = click
for(var i = 0; i < el.length; i++){
  el[i].addEventListener("click", myFunction);
}

function myFunction() {
  // In this statement we check, which input is checked..✓
  if (!lastChecked) {
      lastChecked = this;
    return;
  }

// Declaring 'from' and 'to' and getting index number of an array-like inputs
var from = [].indexOf.call(el, this);
var to = [].indexOf.call(el, lastChecked);

 /* Here we will know which 'check' will be the min and which will be the max with the 
 help of Math metods */
var start = Math.min(from, to);
var end = Math.max(from, to) + 1;

// Here we create an array from NodeList
var arr = Array.prototype.slice.call(el);

// Here we get a new array, where we declare the start and the end
// Start is the min, end is the max
var slicedArr = arr.slice(start, end);

// Now we iterate through every sliced input, and set its attribute to checked
for(var j = 0; j < slicedArr.length; j++){
    slicedArr[j].checked = lastChecked.checked;
}

lastChecked = this;

}

感谢您的帮助。这是我关于stackoverflow的第一篇文章，所以如果我没有正确发布，我很抱歉。谢谢。

Answer 1

无法取消选中复选框。

当然，你可以使用

document.getElementById("elemnt-id").disabled = true;

或通过

disabled中的

html属性，

但始终有办法通过Developer tools手动取消选中它们。所以你也应该在服务器上进行一些验证。

Answer 2

通过属性选择器获取元素

$this->http->request('POST', $url, [
RequestOptions::MULTIPART => [
    [
        'name'     => 'contents',
        'contents' => $file->getContent(),
        'filename' => $file->getFileName(),
    ],
    [
        'name'     => 'attributes',
        'contents' => json_encode([ 'name' => $file->getFileName(), "parent" => [ "id" => $dirId ] ]),
    ],
]]);

这里是使用模板文字在选择器中构建字符串 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals

只需通过Javascript

在复选框中设置disabled属性

for (let i=start; i<=end; i++){
    document.querySelector(`[value="${i}"]`).disabled = true;
}

它会得到像

这样的HTML

document.querySelector('[value="7"]').disabled = true;

https://www.w3schools.com/jsref/prop_checkbox_disabled.asp

如何制作“已选中”复选框，无法取消选中

2 个答案: