jQuery試圖檢查一個復選框

Question

我試圖單獨檢查一個帶有jquery的復選框，然后執行return false，因為我不想影響其他的jquery方法。 但是由於某種原因，該復選框沒有選中或取消選中。 我需要在其中返回return false，因為還有其他功能會影響復選框的外部元素。

 $("#p h1 input").click(function (event) {

    if ($(this).is(':checked'))
    {
        $(this).prop('checked', false);
    }
    else
    {
        $(this).prop('checked', true);
    }

    return false;
});

好的，我在H1上也有這個

$("#p h1").click(function (event) {
        $(this).next(".content").slideToggle();

        if ($(this).hasClass("on")) {
            $(this).find("span").addClass("fa-angle-up");
            $(this).find("span").removeClass("fa-angle-down");
        }
        else {
            $(this).find("span").removeClass("fa-angle-up");
            $(this).find("span").addClass("fa-angle-down");
        }

        $(this).toggleClass("on");
    });

該復選框位於h1內部。

我不希望在單擊復選框時發生滑動功能或第二單擊事件中的任何事件。

這是HTML

<h1>Set<span class="fa fa-angle-up"></span>@Html.CheckBoxFor(model => model.Confirm)</h1>

Answer 1

我不希望在單擊復選框時發生滑動功能或第二單擊事件中的任何事件。

在這種情況下，您可以檢查事件的target是什么，如果是復選框，則不執行邏輯。 為此，您可以使用jQuery的is()函數。

還要注意，只需使用toggleClass()即可簡化if邏輯。 嘗試這個：

 $("#p h1").click(function(e) { if ($(e.target).is(':checkbox')) return; var $h1 = $(this); $h1.next(".content").slideToggle(); $h1.toggleClass('on').find('span').toggleClass('fa-angle-up fa-angle-down'); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" /> <div id="p"> <h1 class="on"> Set <span class="fa fa-angle-up"></span> <input type="checkbox" name="Confirm" /> </h1> </div>