html - 如何在 div 中禁用 div 或 jstree？

Question

谁能告诉我如何禁用 div 或 div 内的元素？我的 div 中有一个 jstree，我想禁用 div/jstree。

谢谢！

Answer 1

我在这里为您做了一个简单的示例
基本上，它会在您的 jstree 上创建一个 div，以便从用户交互中禁用它。
我想你可以让它在视觉上更好，但我认为这给了你这个想法。
我还检查了没有严格的方法来禁用 jstree，即使它可能有用。
也许你想问谷歌组的开发人员......

HTML 代码：

<button id="disable">Disable</button>
<button id="enable">Enable</button>
<div id="jstree-wrapper">
    <div id="demo" style="height:100px;">
        <ul>
            <li id="node_1_id">
                <a>Root node 1</a>
                <ul>
                    <li id="child_node_1_id">
                     <a>Child node 1</a>
                 </li>
                 <li id="child_node_2_id">
                     <a>Child node 2</a>
                 </li>
             </ul>
         </li>

     </ul>
     <ul>
                    <li><a>Team A's Projects</a>
                        <ul>
                        <li><a>Iteration 1</a>
                            <ul>
                                <li><a>Story A</a></li>
                                <li><a>Story B</a></li>
                                <li><a>Story C</a></li>
                            </ul>
                            </li>
                        <li><a>Iteration 2</a>
                        <ul>
                            <li><a>Story D</a></li>
                              </ul>
                            </li>
                        </ul>
                    </li>
                </ul>
    </div>

    <div id="disabler"></div>
</div>​

CSS 代码：

#jstree-wrapper {
    position: relative;
}

#disabler {
    position: absolute;
    top: 0px;
    left: 0px;
    background-color: black;
    opacity: 0.5;
}​

JS代码：

$(document).ready(function() {

    $("#demo").jstree();

    $("#disable").on("click", function() {
        $("#disabler").css("width", $("#demo").width());
        $("#disabler").css("height", $("#demo").height());
    });

    $("#enable").on("click", function() {
        $("#disabler").css("width", "0px");
        $("#disabler").css("height", "0px");
    });

});

Answer 2

这是一个很好的例子，我没有发现在其他任何地方都做得如此简单和好。在此示例中，您只能通过添加我在代码片段中输入的 CSS 样式来模拟“禁用”属性。它通过使用 CSS "visible:hidden" 禁用，并添加一个半透明蒙版来覆盖整个 div 区域并禁用其中的任何内容。您可以选择注释掉“可见性：隐藏”以便能够看到掩码后面的元素，但是它们将是可选项的，如果您不介意隐藏它们，请取消注释该样式。

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>