Question 35799 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

How to prevent the click event in JQuery?

There is one toggle switch, When click on a toggle it switches ON and popup with close and Ok button appears.
But if I again click on a toggle then it switches off and toggle disappears.
The actual requirement is, with a every click for which the toggle switches ON and popup appears, the toggle switch should not get switch OFF until user click on close button which is present in popup.

http://jsfiddle.net/5rdbe08a/3/

<script>
        $(document).ready(function () {
            var status = 0;
            $(document).on('click', '#isImpliedDelete', function () {
                status++;
                console.log(status);
                var popup = document.getElementById("myPopup");
                popup.classList.toggle("show");
                if (status % 2 == 0) {
                    $("#submitBtn").prop('disabled', false);

                } else {
                    $("#submitBtn").prop('disabled', true);
                }
            });

            $("#isImpliedDelete").click(function () {
                $("#myPopup").show();
                if ($("#submitBtn").prop('disabled', false) == true) {
                    $("#myPopup").show();
                }
            });

            $("#ok").on('click', function () {
                $("#myPopup").hide()
                $("#submitBtn").prop('disabled', false);
            });

            $("#close").on('click', function () {
                if ($("#myPopup").show() == true) {
                    $("#myPopup").hide();
                }
                $("#isImpliedDelete").click();
                $("#submitBtn").prop('disabled', false);
                console.log("close");

            });
        });
Tags:

3

Answers


  1. 0

    I didn’t understand what you actually want but i just solve your toggle problem. have a look

    $(document).ready(function(){
  $(document).on('click','#isImpliedDelete',function(){
    $(this).attr('disabled', true);
    $('#myPopup').addClass('show');
  })
  
  $(document).on('click','#ok',function(){
      $(this).parents('.popup').next('.input-group-prepend').find('input[type="checkbox"]').prop('checked', false);
      $('#myPopup').removeClass('show');
      $('#isImpliedDelete').removeAttr('disabled')
  })

})
    /* Radio Switches */
        .switch {
            position: relative;
            display: inline-block;
            width: 60px;
            height: 34px;
        }

        .switch input {
            opacity: 0;
            width: 0;
            height: 0;
        }

        .slider {
            position: absolute;
            cursor: pointer;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: #3c3c3c;
            -webkit-transition: .4s;
            transition: .4s;
        }

        .slider:before {
            position: absolute;
            content: "";
            height: 26px;
            width: 26px;
            left: 4px;
            bottom: 4px;
            background-color: white;
            -webkit-transition: .4s;
            transition: .4s;
        }

        input:checked+.slider {
            background-color: #00afaa;
        }

        input:focus+.slider {
            box-shadow: 0 0 1px #00afaa;
        }

        input:checked+.slider:before {
            -webkit-transform: translateX(26px);
            -ms-transform: translateX(26px);
            transform: translateX(26px);
        }

        /* Rounded sliders */
        .slider.round {
            border-radius: 34px;
        }

        .slider.round:before {
            border-radius: 50%;
        }

        /* Popup container - can be anything you want */
        .popup {

            position: relative;
            align-content: center;
            display: flex;
            align-items: center;

            display: inline-block;
            cursor: pointer;
            margin: 0 auto;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
        }


        /* The actual popup */
        .popup .popuptext {


            align-content: center;

            visibility: hidden;
            width: 396px;
            border-style: groove;

            background-color: #555;
            color: #fff;
            text-align: center;
            border-radius: 6px;
            padding: 5px 0;
            position: absolute;
            z-index: 10000;
            /* bottom: 25%; */
            top: -50px;
            left: 310px;
            /* margin-left: -180px; */


        }

        /* Popup arrow */
        .popup .popuptext::after {
            content: "";
            position: absolute;
            top: 100%;
            /* left: 50%; */
            margin-left: -80px;
            border-width: 5px;
            border-style: solid;
            border-color: #555 transparent transparent transparent;
        }

        /* Toggle this class - hide and show the popup visible */
        .popup .show {
            visibility: visible;
            -webkit-animation: fadeIn 1s;
            animation: fadeIn 1s;
        }

        .popup .hide {
            visibility: hidden;
            -webkit-animation: fadeIn 1s;
            animation: fadeIn 1s;
        }

        /* Add animation (fade in the popup) */
        @-webkit-keyframes fadeIn {
            from {
                opacity: 0;
            }

            to {
                opacity: 1;
            }
        }

        @keyframes fadeIn {
            from {
                opacity: 0;
            }

            to {
                opacity: 1;
            }
        }
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<br> <br> <br>


    <div class="popup">
        <span class="popuptext" id="myPopup">Hello,How are you?
            <button id="ok">Ok</button>
            <button id="close">Close</button>
        </span>
    </div>
    <div class="input-group-prepend">
        <label class="switch">
            <input id="isImpliedDelete" name="isImpliedDelete" type="checkbox">
            <span class="slider round"></span>
        </label>
    </div>

    <br> <br> <br>

    <button class="btn btn-primary btn-block" type="submit" id="submitBtn" >
        <i class="fa fa-file-upload mr-2"></i> Button
    </button>

    Comment down if you want something different from it.

    Login or Signup to reply.
  2. 0

    In terms of logic, what you want to do is check first if the modal is visible or not. If it isn’t, then the switch should launch the modal. If it’s visible, then the switch should remain in it’s current state (we’ll use e.preventDefault(); to do this).

    Here is a modified version of your fiddle:
    EDIT2: updated fiddle based on new comment:

    http://jsfiddle.net/5fb4xc0L/1/

    One observation about your code:
    I see that you are using the jquery hide function BUT you are also using separate "show" and "hide" classes to visually toggle the visibility of the modal. You cannot use hide() to hide the element then expect that toggling the class .show to bring it back. Here is an explanation

    Login or Signup to reply.
  3. 0

    Used e.preventDefault() in click function.

    $('#<id>').on(click,function(e){ e.preventDefault(); //Do your task });

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search