Question

我试图单独使用jquery选中一个复选框，然后执行return false，因为我不想影响其他jquery方法。但是由于某种原因，该复选框没有选中或取消选中。我需要返回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()函数。

还请注意，只需使用if即可简化toggleClass()的逻辑。试试这个：

$("#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>

jQuery试图检查一个复选框

1 个答案: