locked
disabling jquery click on div element RRS feed

  • Question

  • User2096382003 posted

    i am wanting to remove the click event on a div that is set in jquery when a radiobutton is clicked.

    by default on page load the div itself is set to have an onclick event in the jquery file.

    so when mouse over the div (and its contents) the mouse pointer  becomes a hand and clicking launches a modal.

    however when a radiobutton is chosen i want to effectively "disable" this function, so the div is 

    1) not clickable

    2) mouse pointer doesnt change when mousing over the div

    3) div and its contents are faded to give the impression of not being available.

    i know the easy option would be to just hide the div but the client doesnt want this.

    im aware that attr('disabled') will not work on div elements (again if it was a button this would have been the solution)

    Thursday, December 8, 2016 4:38 PM

All replies

  • User-691209617 posted

    use stopPropagation(); for more detail check this link 

    $( "btn" ).click(function( event ) {
      event.stopPropagation();
      // Do your code
    });

     

    Thursday, December 8, 2016 4:49 PM
  • User-707554951 posted

    Hi mark-1961,

    1) not clickable

    For your problem above, if you want make your div unclickable. I suggest you could use unbind() method.

    The unbind() method removes event handlers from selected elements.

    http://www.w3schools.com/jquery/event_unbind.asp

    2) mouse pointer doesnt change when mousing over the div

    3) div and its contents are faded to give the impression of not being available.

    I suggest you could use .css() method to change the cursor style and the div’s opacity.

    The css() method sets or returns one or more style properties for the selected elements.

    http://www.w3schools.com/jquery/jquery_css.asp

    Besides, based on you needs, I make an sample, yo could refer to it:

     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
         <script>
             $(document).ready(function () {
                 $("#Div").click(function () {
                     window.location = "https://forums.asp.net/t/2111626.aspx";
                 });
             })
             function DisableClick() {
                 $("#Div").unbind("click");
                 $("#Div").css("cursor", "");
             
                 $("#Div").css("opacity", "0.4");
             }
         </script>
    
     <div id="Div" style="height:100px; width:100px;border:1px solid black;cursor:pointer;" >
                <br />
                 <br />
                 My div For test
            </div>
            <br />
             <input type="radio" name="gender" value="Change Div" onclick="DisableClick()"/>Change Div<br />

    Output screenshot as below:

    Best regards

    Cathy

    Friday, December 9, 2016 2:35 AM