Как переопределить УСПЕШНОЕ поведение флажка

Question

Это мой jsfiddle

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

Я хочу сделать настоящий установлен флажок/unselecetd управления его из класса FormItem только.

При нажатии на CheckBox ничего не должно случиться (что я не должен быть выбран и unselecetd)

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

это вы имеете в виду? DEMO

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

Answer 2

Для отключения функции по умолчанию:

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

Чтобы сделать флажок работы с использованием .formItem:

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

Answer 3

Вам нужно отменить поведение по умолчанию для события, когда вы надеваете» t хотите, чтобы щелчок был применен.

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

Вот исправленный jsfiddle:

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

Answer 4

Использование event.preventDefault()

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

Если этот метод вызывается, действие по умолчанию события не будет срабатывать.

В случае флажка действие по умолчанию заключается в переключении выбора.

DEMO

Answer 5

Поместите return false в CheckBox события нажатия и установите/снимите его в случае формы щелчка.

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

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


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

Demo

Answer 6

Использование JQuery stopPropagation(); метод

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

JQuery Doc