Question

我有一个div，当单击它时应该切换一个复选框。但是在我的div内部，我还有其他一些输入字段，这些字段不应切换此复选框。

我尝试添加和取消绑定这些输入/标签的类，但它们仍切换原始复选框。另外，e.stopPropagation()不会禁用切换。

<div class="ui centered raised card itemSelector" id="AJ-HUB">
  <div class="content">
    <div class="header"><label><input type="checkbox" name="HUB" value="AJ-HUB"  class="HUB">AJAX Hub</label></div>
      <div class="description"><p>Description Text</p></div> 
      <div class="extra content">
        <p><label  class="noSelectorClick"><input type="radio" name="AJ-HUB_col" value="Wit"  disabled >Wit</label></p>
        <p><label  class="noSelectorClick"><input type="radio" name="AJ-HUB_col" value="Zwart" checked disabled >Zwart</label></p>                                                                               
       </div>
  </div>
</div>

    $('.itemSelector').on('click', function(e) {
        e.stopPropagation();
        let input = $('#wizard .header input[value=' + this.id + ']')
        let isChecked = input.is(':checked')
        if(isChecked == true) {
            input.prop('checked',false)
        } else {
            input.prop('checked',true)
        }

    })\\.children('.noSelectorClick').off()

Answer 1

您可以检查被单击的实例是否与您在其上注册单击事件的实例相同。

$('.itemSelector').on('click', function(e) {
        if (e.target !== this) {
            return;
        }
        e.stopPropagation();
        let input = $('#wizard .header input[value=' + this.id + ']')
        let isChecked = input.is(':checked')
        if(isChecked == true) {
            input.prop('checked',false)
        } else {
            input.prop('checked',true)
        }

    })

单击div上的事件，但不单击div中的元素

1 个答案: