Disabling entire Div using jquery

Question

I have a div with a number of elements in it that I need to be disabled(cant be clickable). I have comments being populated into this div, so I want the comments to still be readable, but no one can click, reply or like, until re-enabled.

Based on my research this cant be done in a formally correct way. I have gotten this, which works, but not when using window.onload(Or it works intermittently(:

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);
    }
}

Below is the portion that needs to be disabled(This gets populated with all the elements on an ajax get:

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

</div>

EDIT

It seems what is posted into my container is the following(Hope this helps):

<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>

So it works sometimes, but when I log out and log in with a new user, it doesnt seem to work.

Is there something else that can be done, or something other than a div that can be used ? I have even tried a fieldset but that also does not work.

Appreciate any help.

When you say `disabled`, do you mean it removes the div, like delete it? `div` do not have the `disabled` attribute, only form elements do like `input` and that's why it doesn't work properly. — Ashley Brown, Oct 02 '18 at 15:43
No - I need it just to be disabled. I have a bunch of comments being populated in the div, so I want the comments to still be readable, but no one can comment, like or reply.(Unless it is re-enabled) — AxleWack, Oct 02 '18 at 15:44
And I assume the comment entry box/input is inside the `#comments-container` div? Because it seems like thats only where posted comments get *inserted* into..? — Ashley Brown, Oct 02 '18 at 15:45
just add a class to the parent div that gives it css of `pointer-events:none` — Pete, Oct 02 '18 at 15:45
see [this](https://stackoverflow.com/a/5290627/5813861), does anything different in your question.? — yash, Oct 02 '18 at 15:46
@yash Hence why I asked what I asked. In his code, there are no form elements within the div. — Ashley Brown, Oct 02 '18 at 15:47
@yash I tried that, but not everything is disabled. I have links that can then still be clickable(the reply button) — AxleWack, Oct 02 '18 at 15:47
what about [this one](https://stackoverflow.com/a/17187020/5813861) to disable link! — yash, Oct 02 '18 at 15:48
I think you need to disable the ability to post a comment and not the div that simply receives the comments.. Because from what I can gather, that div you posted is only a holder for *posted* comments. If you 'disabled' that div you posted, it wouldn't stop comments being posted. Post the rest of your code.. — Ashley Brown, Oct 02 '18 at 15:48
hmmm, you haven't said that anywhere in the question - you just say you want to disable everything, anyway I would do this with your server side language and update your inputs based on your model rather than waiting for the dom to load and then using js on it: https://stackoverflow.com/questions/6660146/set-disable-attribute-based-on-a-condition-for-html-textboxfor — Pete, Oct 02 '18 at 15:49
@Pete Your suggestion using pointer-events:none honestly does the best job for me at this point. Id have LOVED to be able to make the div "read-only" like you can with a textbox, but this works for me. Please post as answer and ill be happy to mark as answer. Thanks everyone for the replies. — AxleWack, Oct 02 '18 at 15:53
@AxleWack Daniel has pretty much posted the same thing, just accept that — Pete, Oct 02 '18 at 15:55
If you are happy with that then sure - But you suggested it first. Up to you. — AxleWack, Oct 02 '18 at 15:56
@AxleWack But point events doesn't work. It only stops the mouse. You're leaving out what goes inside the comments-container and that is **vital for us to see...** why are you ignoring the request to post what gets injected? We are only trying to help. — Ashley Brown, Oct 02 '18 at 15:58
I've deleted my answer; enough problems with pointer-events have been pointed out that I'm not feeling like it's a good solution. @AxleWack if you can provide a sample of the HTML within that container, or at least list the specific elements you need to disable I'm sure someone can come up with a better approach. — Daniel Beck, Oct 02 '18 at 16:00
@ProEvilz sadly because I am not able to get this. Everything seems to be done from within a javascript file, and checking the source of the page does not show any of the html produced, unless there is another way ? — AxleWack, Oct 02 '18 at 16:01
Use the developer console rather than viewing the raw source; that'll show you the script-generated HTML. — Daniel Beck, Oct 02 '18 at 16:01
I think I found it. Its a little messy, but I hope that help.(I found it in the Element tab in the developer tool) - Updated my post — AxleWack, Oct 02 '18 at 16:12

ABC · Accepted Answer · 2018-10-02T17:01:37.947

Here is an example of using JQuery to disable all elements on page load, that are inside your div. Using pointer with CSS, it seems you just wanted an example. Maybe your learning, so here you go.

/** 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 -->

No problem, if you need more help I am more than happy to help. I'll watch out to see if you post anything on here. Or if you have a question @raymondbpittman on twitter. Good luck. — ABC, Oct 02 '18 at 16:57

Disabling entire Div using jquery

1 Answers1