禁用html中的所有元素

Question

我們如何通過javascript禁用html中的所有元素。最簡單的方法......

Answer 1

我建議以“燈箱”式的方式來做。

在 Page 上方添加一個絕對定位的、透明的、全屏的 div Layer。 這樣，用戶甚至無法點擊鏈接。

要向用戶提供頁面已禁用的視覺反饋，您可以將 div（例如 50% 透明）設置為黑色。

順便說一句，這里還有一個使用類似技術的jQuery 插件。

Answer 2

最簡單的方法是將所有要禁用的表單元素放在<fieldset>中，然后禁用字段集本身。

一個例子：http: //jsfiddle.net/xdkf9b8j/1/

如果您不想要字段集周圍的邊框，請根據 css 將其刪除。

Answer 3

試試這個，

function disableForm(theform) {
        if (document.all || document.getElementById) {
            for (i = 0; i < theform.length; i++) {
            var formElement = theform.elements[i];
                if (true) {
                    formElement.disabled = true;
                }
            }
        }
    }

或者你也可以試試這個，正如 RaYell 所說

function disableForm() {
    var inputs = document.getElementsByTagName("input");
    for (var i = 0; i < inputs.length; i++) {
        inputs[i].disabled = true;
    }
    var selects = document.getElementsByTagName("select");
    for (var i = 0; i < selects.length; i++) {
        selects[i].disabled = true;
    }
    var textareas = document.getElementsByTagName("textarea");
    for (var i = 0; i < textareas.length; i++) {
        textareas[i].disabled = true;
    }
    var buttons = document.getElementsByTagName("button");
    for (var i = 0; i < buttons.length; i++) {
        buttons[i].disabled = true;
    }
}

要禁用整個頁面，您可以在此處找到一些信息，

Answer 4

我不知道你為什么需要它，但這會起作用：

// this will disable all input elements
var elems = document.getElementsByTagName('input');
var len = elems.length;

for (var i = 0; i < len; i++) {
    elems[i].disabled = true;
}

Answer 5

表單中的所有表單元素（輸入、選擇、文本區域）都可以通過form.elements HTMLCollection 訪問，您可以迭代集合禁用每個元素：

function disableForm(form) {
var length = form.elements.length,
    i;
  for (i=0; i < length; i++) {
    form.elements[i].disabled = true;
  }
}

使用示例：

disableForm(document.forms[0]);
disableForm(document.getElementById('formId'));

Answer 6

鎖定：

    var controls = document.querySelectorAll("button, input, select, textarea");
    for (var c of controls) {
        c.disabled = true;
    }

開鎖：

    var controls = document.querySelectorAll("button, input, select, textarea");
    for (var c of controls) {
        c.disabled = false;
    }

就這么簡單。

Answer 7

有一次我不得不為我的網站創建一個教程。 我需要禁用頁面上除某些元素之外的所有交互。 為此，我使用了這種方法：首先確保從頁面元素中刪除所有事件綁定。 您可以使用以下方法執行此操作：

   $('*').unbind();

接下來禁用頁面上的所有鏈接：

   $('a').each(function(){$(this).click(function(){return false;})});

並禁用所有輸入：

   $('input').attr('disabled', true);

代碼需要在文檔末尾執行。 順便說一句，您可以排除 jquery 選擇器中的某些元素以保持它們處於活動狀態。

Answer 8

只是沒有拐杖！

/**
 * Enable/disable all form controlls
 * @param status Status: true - form active, false - form unactive
 */
HTMLFormElement.prototype.setStatus = function (status) {
    for (var i in this.elements) {
        this.elements[i].disabled = !status;
    }
};

// Example:
var my_form = document.getElementById('my_form_with_many_inputs');
my_form.setStatus(false); // Disable all inputs in form
my_form.setStatus(true); // Enable all inputs in form

Answer 9

根據您需要的結果，您也可以這樣做

`document.getElementById('main_form').style.display = 'none';`

其中main_form是您的表單的 ID。 您可以使用相同的技術來隱藏包含您要禁用的任何元素的div 。

Answer 10

最好的方法是添加一個具有最高 z-index 的 div，寬度：100% 和高度：100%。它會覆蓋整個頁面，並使所有不可點擊的內容實際上被禁用。最好，因為它不會使用任何循環和任何復雜的代碼。