Question

这是我的jsfiddle

我想让当前复选框select / unselecetd仅从类formItem控制它。

当点击复选框时，不会发生任何事情（也就是说我不应该选择和取消选择）

HTML：

<form class="formItem">
<input type="checkbox" class="checkboxclas" name="checkbox-mini-0" id="check4" data-mini="true" id_attr="4"  />
<label item_id_itr_some="label4" class="testtt" for="checkbox-mini-0">Popcorn Plain salted</label>
 <i class="delete-item-btn"></i>
 </form>

JS：

$(document).on("click", ".formItem", function() {        
    alert('clicked on formItem');    
});

$(document).on("click", ".checkboxclas", function(e) { 

});

我也不想使用复选框的禁用属性。

单击复选框时，我想调用FormItem类下的代码。

可能吗？

Answer 1

使用jquery stopPropagation();方法

$(document).on("click", ".formItem", function(e) {
      e.stopPropagation();   
 });

JQuery Doc

Answer 2

这是什么意思？的 DEMO

$(this).prop('checked',!$(this).prop('checked'));

Answer 3

要禁用默认功能：

$(document).on("click", ".checkboxclas", function(e) {
  e.preventDefault();
  return false;
});

使用.formItem：

使复选框工作

$(document).on("click", ".formItem", function() {
  $('#check4').prop('checked',!$('#check4').is(':checked'));
});

Answer 4

如果您不希望单击应用，则需要取消事件的默认行为。

$(document).on("click", ".checkboxclas", function(e) { 
 e.preventDefault();
    return false;
});

这是一个更正的jsfiddle：

http://jsfiddle.net/8brm830z/3/

Answer 5

使用event.preventDefault()

$(document).on("click", ".formItem", function(e) {
      e.preventDefault();   
 });

如果调用此方法，则不会触发事件的默认操作。

如果是复选框，则默认操作是切换选择。

DEMO

Answer 6

将return false放入复选框点击事件，然后在表单点击事件中选中/取消选中它。

$(document).on("click", ".formItem", function() {

alert('clicked on formItem');  
    $('#check4').prop('checked',!$('#check4').is(':checked'));
});


$(document).on("click", ".checkboxclas", function(e) { 
     return false;
});

<强> Demo

如何覆盖复选框的默认行为

6 个答案: