如何在不使用JQuery的情況下禁用整個Div目錄

Question

因為我具有JavaScript的基本知識，所以我想執行以下操作：

• 通過使用兩個單選按鈕，為付款提供兩個選項：

  1. 用現金
  2. 通過支票

• 如果用戶選擇“現金”單選按鈕，則“支票按鈕”也應禁用，其中“支票號碼”和“銀行名稱”之類的詳細信息的“支票划分”也應禁用。

• 和簽證Versa

有沒有一種方法可以不使用JQuery？ （禁用div並禁用所有內容）

在此先感謝您的幫助。

Answer 1

嘗試這個：

document.getElementById("myDivId").disabled = true;

要禁用div中的所有元素，請嘗試以下操作：

var allChildNodes = document.getElementById("myDivId").getElementsByTagName('*');

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

Answer 2

此代碼將禁用給定容器內的所有元素。

var container = document.getElementById("cashContainer");
var inputs = document.getElementsByTagName("input").concat(document.getElementsByTagName("select"));
for (var i = 0; i < inputs.length; i++) {
    inputs[i].disabled = true;
}

應用相同的代碼，您可以重新啟用另一個容器。

Answer 3

你可以試試這個

的HTML

<input type="radio" name="cashcheck" value="cash" checked />Cash<br />
<div id="cash">
    <form method="post">
        <input type="text" name="cashTxt1" />
        <input type="text" name="cashTxt2" />
    </form>
</div>

<input type="radio" name="cashcheck" value="check" />Check<br />
<div id="check">
    <form method="post">
        <input type="text" name="checkTxt1" disabled />
        <input type="text" name="checkTxt2" disabled />
    </form>
</div>

JS

window.onload=function(){
    var radios = document.getElementsByName('cashcheck');
    radios[0].onchange=toggle;
    radios[1].onchange=toggle;
};

function toggle()
{
    if(this.checked)
    {
        var div = document.getElementById(this.value),
        inputs = div.getElementsByTagName('form')[0].getElementsByTagName('*');
        for( var i=0; i<inputs.length; i++)
        {
            inputs[i].removeAttribute('disabled');
        }

        var op = this.value == 'cash' ? 'check' : 'cash',
        divOp = document.getElementById(op),
        divOpInputs = divOp.getElementsByTagName('form')[0].getElementsByTagName('*');
        for( var i=0; i<divOpInputs.length; i++)
        {
            divOpInputs[i].setAttribute('disabled');
        }
    }
}

演示。

Answer 4

 <fieldset disabled="true"> <div> <input type="text" /> </div> <br> <div> <input type="text" /> </div> <br> <div> <input type="text" /> </div> <br> </fieldset>