2012-09-01 87 views
-1

我想使用Javascript禁用div標記。 我不想隱瞞它。我正在使用Firefox瀏覽器。使用Javascript禁用div標記

我在div標籤裏面有我的菜單。

我正在點擊,1個菜單並打開一個頁面。在頁面上,我有一個按鈕。點擊該按鈕時,我想禁用所有菜單,但不是整個頁面。用戶不能點擊任何菜單。

我的代碼,

<div id="div1"> 
    <ul id="abc"> 
     Menu1 Menu2 Menu3 
    </ul> 
</div> 

我試圖document.getElementById("div1").disabled=true;,但沒有奏效。

+1

檢查:http://stackoverflow.com /問題/ 639815 /如何對禁用,所有-DIV的內容。在發佈之前,您應該搜索stackoverflow本身可能出現的類似問題。 –

+0

你對'div'有什麼期待'disabled'屬性?它不是一個表單元素,或者 - 通常是任何類型的交互元素。 –

回答

0

Div元素沒有標準的disabled屬性。你將不得不使用自定義JS來做你認爲是「禁用」div的東西。

0

你可能會喜歡這個例子: (取消對 '可見性:隱藏' 線已經完全禁用的元素。)

function disable(elementId, enabling) { 
 

 
    el = document.getElementById(elementId); 
 

 

 
    if (enabling) { 
 
    el.classList.remove("masked"); 
 
    } else 
 

 
    { 
 
    el.classList.add("masked"); 
 
    } 
 
}
.masked { 
 
    position: relative; 
 
    pointer-events: none; 
 
    display: inline-block; 
 
    //visibility:hidden; /* Uncomment this for complete disabling */ 
 
} 
 
.masked::before { 
 
    position: absolute; 
 
    width: 100%; 
 
    height: 100%; 
 
    top: 0px; 
 
    left: 0px; 
 
    visibility: visible; 
 
    opacity: 0.2; 
 
    background-color: black; 
 
    content: ""; 
 
}
<button onclick="alert('Now, click \'OK\' then \'Tab\' key to focus next button.\nThen click \'Enter\' to activate it.');">Test</button> 
 
<div id="div1" style="display:inline-block" class="masked"> 
 
    <button onclick="alert('Sample button was clicked.')">Maskakable</button> 
 
    <button onclick="alert('Sample button was clicked.')">Maskakable</button><br/> 
 
    <br/> 
 
    <button onclick="alert('Sample button was clicked.')">Maskakable</button> 
 
    <button onclick="alert('Sample button was clicked.')">Maskakable</button> 
 
</div> 
 
<button>Dummy</button> 
 

 
<br/> 
 
<br/> 
 
<br/> 
 
<button id="enableBtn" onclick="disable('div1',true);disable('enableBtn',false);disable('disableBtn',true);">Enable</button> 
 
<button id="disableBtn" onclick="disable('div1',false);disable('enableBtn',true);disable('disableBtn',false);" class="masked">Disable</button>