使用 jquery 禁用整个 Div

Question

我有一个包含许多元素的 div，我需要为 disabled（不能点击）。我已将 cmets 填充到此 div 中，因此我希望 cmets 仍然可读，但在重新启用之前，没有人可以点击、回复或点赞。

根据我的研究，这不能以正式正确的方式完成。我得到了这个，它有效，但在使用 window.onload 时不起作用（或者它间歇性地工作（：

window.onload = function(){
    var isCommentsDisabled = '@Model.isCommentsDisabled';
    alert(isCommentsDisabled);
    if(isCommentsDisabled == 'True'){
        $(".comments-container *").prop('disabled',true);
    }
    else if(isCommentsDisabled == 'False'){
        $(".comments-container *").prop('disabled',false);
    }
}

以下是需要禁用的部分（这将填充 ajax get 上的所有元素：

<div id="comments-container" class="comments-container2">

</div>

编辑

似乎发布到我的容器中的内容如下（希望这会有所帮助）：

<div id="comments-container" class="comments-container2 jquery-comments" style="pointer-events: none;">
    <div class="commenting-field main">
        <div class="profile-picture round" style="background-image: url(&quot;https://viima-app.s3.amazonaws.com/media/public/defaults/user-icon.png&quot;);"></div>
        <div class="textarea-wrapper">
            <span class="enabled upload inline-button"><i class="fa fa-paperclip"></i><input type="file" data-role="none" multiple="multiple"></span>
            <span class="close inline-button" style="display: none;">
                <span class="left"></span>
                <span class="right"></span>
            </span>
            <div class="textarea" data-placeholder="Add a comment" contenteditable="true" style="height: 8em;">sdfsdfsdfsdf<div><br></div><div><br></div><div><br></div><div><br></div></div>
            <div class="control-row" style="display: none;">
                <span class="send save highlight-background enabled">Send</span>
                <span class="enabled upload"><i class="fa fa-paperclip"></i><input type="file" data-role="none" multiple="multiple"></span>
            </div>
        </div>
    </div><ul class="navigation">
        <div class="navigation-wrapper">
            <li data-sort-key="newest" data-container-name="comments" class="active">Comments</li>
            <li data-sort-key="oldest" data-container-name="comments"></li>
            <li data-sort-key="popularity" data-container-name="comments"></li>
            <li data-sort-key="attachments" data-container-name="attachments"><i class="fa fa-paperclip"></i>Attachments</li>
        </div>
        <div class="navigation-wrapper responsive">
            <li class="title active">
                <header>Comments</header>
            </li><ul class="dropdown" style="display: none;">
                <li data-sort-key="newest" data-container-name="comments" class="active">Comments</li>
                <li data-sort-key="oldest" data-container-name="comments"></li>
                <li data-sort-key="popularity" data-container-name="comments"></li>
            </ul>
            <li data-sort-key="attachments" data-container-name="attachments"><i class="fa fa-paperclip"></i>Attachments</li>
        </div>
    </ul><div class="data-container" data-container="comments">
             <ul id="comment-list" class="main">
                 <li data-id="222" class="comment"><div class="comment-wrapper"><div class="profile-picture round" data-user-id="19b93ed9-5841-436a-bc6a-e19998d17b2d" style="background-image: url(&quot;https://viima-app.s3.amazonaws.com/media/public/defaults/user-icon.png&quot;);"></div><time data-original="2018-10-02">10/2/2018</time><div class="name"><span data-user-id="19b93ed9-5841-436a-bc6a-e19998d17b2d">Annebelle Lothering</span></div><div class="wrapper"><div class="content">I have entered the first Comment <input class="tag ping" type="button" data-role="none" value="@Cheyne Lothering" data-value="77e72598-8ed9-47e9-be28-1edbf6ad5656" data-user-id="77e72598-8ed9-47e9-be28-1edbf6ad5656"> What do you say about THAT!?</div><span class="actions"><button class="action reply" type="button">Reply</button><span class="separator">·</span><button class="action upvote highlight-font"><span class="upvote-count">2</span><i class="fa fa-thumbs-up"></i></button></span></div></div><ul class="child-comments"><li data-id="225" class="comment by-current-user"><div class="comment-wrapper"><div class="profile-picture round" data-user-id="46504a0d-8f29-43b7-a291-7827aa7bb04e" style="background-image: url(&quot;Cheyne&amp;Annelie-48.jpg&quot;);"></div><time data-original="2018-10-02">10/2/2018</time><div class="name"><span data-user-id="46504a0d-8f29-43b7-a291-7827aa7bb04e">You</span></div><div class="wrapper"><div class="content">I agree with you <input class="tag ping" type="button" data-role="none" value="@Annebelle Lothering" data-value="19b93ed9-5841-436a-bc6a-e19998d17b2d" data-user-id="19b93ed9-5841-436a-bc6a-e19998d17b2d"> </div><span class="actions"><button class="action reply" type="button">Reply</button><span class="separator">·</span><button class="action upvote highlight-font"><span class="upvote-count">2</span><i class="fa fa-thumbs-up"></i></button><span class="separator">·</span><button class="action edit">Edit</button></span></div></div></li></ul></li>
                 <li data-id="226" class="comment"><div class="comment-wrapper"><div class="profile-picture round" data-user-id="c0cf6910-9724-40ba-934e-7c2f20164e08" style="background-image: url(&quot;https://viima-app.s3.amazonaws.com/media/public/defaults/user-icon.png&quot;);"></div><time data-original="2018-10-02">10/2/2018</time><div class="name"><span data-user-id="c0cf6910-9724-40ba-934e-7c2f20164e08">Annelie Lothering</span></div><div class="wrapper"><div class="content">This is a good idea, thanks!</div><span class="actions"><button class="action reply" type="button">Reply</button><span class="separator">·</span><button class="action upvote"><span class="upvote-count">0</span><i class="fa fa-thumbs-up"></i></button></span></div></div><ul class="child-comments"></ul></li>
             </ul><div class="no-comments no-data"><i class="fa fa-comments fa-2x"></i><br>No comments</div>
    </div><div class="data-container" data-container="attachments" style="display: none;"><ul id="attachment-list" class="main"></ul><div class="no-attachments no-data"><i class="fa fa-paperclip fa-2x"></i><br>No attachments</div></div><div class="droppable-overlay" style="display: none;"><div class="droppable-container"><div class="droppable"><i class="fa fa-paperclip fa-4x"></i><div>Drop files here</div></div></div></div><ul class="dropdown autocomplete" id="textcomplete-dropdown-2" style="display: none; left: 0px; position: absolute; z-index: 100;"></ul><ul class="dropdown autocomplete" id="textcomplete-dropdown-1" style="display: none; left: 0px; position: absolute; z-index: 100;"></ul>
</div>

所以有时它可以工作，但是当我注销并使用新用户登录时，它似乎不起作用。

还有什么可以做的，或者除了 div 之外可以使用的东西吗？我什至尝试过fieldset，但这也不起作用。

感谢任何帮助。

Answer 1

这是一个使用 JQuery 在页面加载时禁用所有元素的示例，这些元素位于您的 div 中。使用带有 CSS 的指针，您似乎只是想要一个示例。也许你的学习，所以你去。

/** Example one **/
window.onload = function(){
  $("#comments-container").addClass("disable");
  $("#two").addClass("disable"); /** Part of example two **/
}

function enable() {
  $("#comments-container").removeClass("disable");
}

function disable() {
  $("#comments-container").addClass("disable");
}

/** End **/

/** Example two **/

$("#one").click(function() {
  $("#two").removeClass("disable");
});

/** End **/

.disable {
        pointer-events: none;
        opacity: 0.4;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<!-- Example one -->
<div id="comments-container" class="comments-container2">
<!-- Test, since I do not know if your content is dynamic -->   <input type="file"/>
</div>

<p>
<a href="#" onClick="enable()">Enable</a> <br/>
<a href="#" onClick="disable()">Disable</a>
</p>

<p> Or if you wanted some diabled, and some not. Or one affecting the other.</p>

<div id="example">
  <div id="one"><a href="#">Link one, enables link two</a></div>
  <div id="two"><a herf="#">Link two</a></div>
</div>
<!-- End -->