Javascript 在页面加载期间禁用复选框

我的表格中有复选框

---

在页面加载过程中，每当我点击选中的复选框时，我不希望在页面加载过程中出现这种情况。复选框应被禁用或不可点击，但在页面完成加载后，它必须是可操作的。如何解决此问题任何人都有想法，请共享

一种方法是在每个复选框中添加：

<input type="checkbox" disabled="disabled">

document.onload = function(){
    document.getElementById("checkBox").disabled = false;
};

然后（假设jQuery已经就位）：

$（函数（）{
$（“：复选框”）.prop（“禁用”，false）；
});

或者不使用jQuery：

var inputs = document.getElementsByTagName("input");    
for (var i = 0; i < inputs.length; i++) 
    if (inputs[i].type == "checkbox") inputs[i].disabled = false;

var inputs=document.getElementsByTagName（“输入”）；
对于（变量i=0；i

只需在所有复选框输入上添加disabled=“disabled”，然后在文档加载时将其删除即可。例如，使用jquery：

<input type="checkbox" disabled="disabled"/>
<script>
$(document).ready(function(){
    $('input[type="checkbox"]'). removeProp("disabled");
});
</script>

$（文档）.ready（函数（）{
$（'input[type=“checkbox”]”）。removeProp（“已禁用”）；
});

您可以这样指定复选框：

<input type="checkbox" disabled="disabled" id="checkBox"/>

此外，jQuery的解决方案还包括：

$(document).ready(function(){
    $('#checkBox').prop("disabled", false);
});

---

这里有太多jQuery：

普通（普通）JavaScript：

document.body.addEventListener("load", function(){
     var checkBoxElements = document.querySelectorAll("input[type='checkbox']");
    for (var i = 0, i < checkBoxElements.length; ++i)
    {
         checkBoxElements[i].removeAttribute("disabled");
    }

}, false);

document.body.addEventListener("load", function(){
     document.body.removeChild(document.getElementById("blocker"));
}, false);

JavaScript:

document.body.addEventListener("load", function(){
     var checkBoxElements = document.querySelectorAll("input[type='checkbox']");
    for (var i = 0, i < checkBoxElements.length; ++i)
    {
         checkBoxElements[i].removeAttribute("disabled");
    }

}, false);

document.body.addEventListener("load", function(){
     document.body.removeChild(document.getElementById("blocker"));
}, false);

增强版仅阻止表单/容器，而不是整个页面

function formElementDisabler(node)
{
    //provide a form element or other container
    //get dimensions:
    var width = node.offsetWidth;
    var height = node.offsetHeight;
    var left = node.offsetLeft;
    var top = node.offsetTop;

    var clonedBlocker = document.getElementById("blocker").cloneNode();
    clonedBlocker.className = "blocker";
    clonedBlocker.removeAttribute("id");

    clonedBlocker.style.left = left + "px";
    clonedBlocker.style.top = top + "px";
    clonedBlocker.style.width = width + "px";
    clonedBlocker.style.height = height + "px";
    clonedBlocker.style.zIndex = "1000";

    if (node.parentElement)
    {
        node.parentElement.appendChild(clonedBlocker);
    }
    else
    {
        document.body.appendChild(clonedBlocker);
    }
}

document.body.addEventListener("load", function(){
    var blockers = document.querySelectorAll(".blocker");
    for (var i = 0, i < blockers.length; ++i)
    {
        blockers[i].parentElement.removeChild(blockers[i]);
    }
}, false);

---

这个脚本必须是你身体的最后一个脚本。它在装载期间禁用容器。如果您向

formElementDisabler

提供一个节点，它将在该节点上画一个div，禁用该元素上的输入。

请发布您的代码好吗？感谢简单的复选框代码，就像我们通常使用的一样，但我已经加载了表单，加载过程中需要一些时间来加载已经禁用的复选框，尽管脚本也可以选中@Christosin，而不是禁用所有复选框，为什么不在页面加载期间在页面上绘制一个元素，防止复选框被点击。@Mouser是的，我喜欢你的想法，但是怎么做呢that@WaqasKhan我的解决方案启动了。这是一个jQuerysolution@Mouser请分享您的想法如何做到这一点，正如您在上面讨论的那样，您是否在其中包含jQuery？是的，另一件重要的事情是，默认情况下禁用复选框@OlegDubaswhat并不好关于如果在加载页面后，我们只是取消选中所有复选框，而不是禁用它们然后重新启用？不过，当用户检查某个东西，然后检查它时，我可能会有点困惑dissappears@Vick您的速度更快，我猜是相同的解决方案

document.getElementById（“checkBox”）.disabled=false这只适用于一个复选框。OP明确说明了复选框。但它可以作为概念的证明。
function formElementDisabler(node)
{
    //provide a form element or other container
    //get dimensions:
    var width = node.offsetWidth;
    var height = node.offsetHeight;
    var left = node.offsetLeft;
    var top = node.offsetTop;

    var clonedBlocker = document.getElementById("blocker").cloneNode();
    clonedBlocker.className = "blocker";
    clonedBlocker.removeAttribute("id");

    clonedBlocker.style.left = left + "px";
    clonedBlocker.style.top = top + "px";
    clonedBlocker.style.width = width + "px";
    clonedBlocker.style.height = height + "px";
    clonedBlocker.style.zIndex = "1000";

    if (node.parentElement)
    {
        node.parentElement.appendChild(clonedBlocker);
    }
    else
    {
        document.body.appendChild(clonedBlocker);
    }
}

document.body.addEventListener("load", function(){
    var blockers = document.querySelectorAll(".blocker");
    for (var i = 0, i < blockers.length; ++i)
    {
        blockers[i].parentElement.removeChild(blockers[i]);
    }
}, false);