Develop Reference

Bind functions events to a checkbox/label on change function

I am trying to add some functionality to the following component, basically when the user clicks on the parent "li label checkbox" this should check/unchecked the > "ul li label checkboxes", the problem is that I am using the label to trigger show/hide the next "ul" and can't bind another function, the ideal escenario will be as follow:
click on li label {element} > slidedown the next ul
click on li label {Checkbox} > check/uncheck the next ul checkboxes childs
I created a jsfiddle at this point the html markup cannot be changed :/
$(document).ready(function(){
function dropdown() {
$("#sidebarNav label").not("input[type='checkbox']").on('change', function (e) {
if (jQuery(this).parent().has("ul")) {
e.preventDefault();
}
$(this).next('ul').slideToggle('fast');
$(this).find('i').toggleClass('ion-plus ion-minus');
//console.log(this);
if (jQuery(this).hasClass('has-dropdown')) {
$(this).find('input').prop('checked', true);
//var item = $(this).find('input');
//console.log(item);
}
var checkbox = $(this).find('input').is(":checked");
//console.log(checkbox);
if(checkbox) {
//console.log("checked.");
} else {
//console.log("unchecked.");
}
});
} dropdown();
$("#checkAll").change(function () {
$("input:checkbox").prop('checked', $(this).prop("checked"));
});
});

Try
function dropdown() {
$("#sidebarNav li").has("ul").find(' > label input').on('change', function (e) {
var $ul = $(this).parent().next();
$ul.slideToggle('fast');
$ul.find('input').prop('checked', this.checked);
$(this).prev('i').add($ul.find('i')).toggleClass('ion-plus', this.checked).toggleClass('ion-minus', !this.checked);
});
}
Demo: Fiddle

How to Add and remove attribute if found specific class

I have some list items and if I click any list item it become selected by adding class .selected
If I click outside of the list item all list item become unselected. FIDDLE
I also have one button initially disabled. I wanted to make the button active by removing "disabled" attribute when list items are selected.
Again if I click outside all list item should be unselected and button become disable again.
How I can do this? Any help will be appreciated.
JS
$(".list-group-item").click(function() {
$('.list-group-item').removeClass('selected');
$(this).addClass('selected');
});
$(document).on('click', function (e) {
if ($(e.target).closest(".list-group-item, .load-table").length === 0) {
$('.list-group-item').removeClass('selected');
}
});

All you're missing is how to enable/disable your button and that is
$('.load-table').prop('disabled',false); // or true to disable
So just plug this in as required
$(".list-group-item").click(function() {
$('.list-group-item').removeClass('selected');
$(this).addClass('selected');
$('.load-table').prop('disabled',false);
});
$(document).on('click', function (e) {
if ($(e.target).closest(".list-group-item, .load-table").length === 0) {
$('.list-group-item').removeClass('selected');
$('.load-table').prop('disabled',true);
}
});
http://jsfiddle.net/has9L9Lh/22/

Use .hasClass() instead and set else condition and to disable and enable the button use .prop()
$(".list-group-item").click(function(e) {
e.stopPropagation();
$('.list-group-item').removeClass('selected');
$(this).addClass('selected');
$('.load-table').prop('disabled',false);
});
$(document).on('click', function (e) {
if ($(e.target).hasClass("list-group")) {
$('.list-group-item').removeClass('selected');
}
else{
$('.list-group-item').removeClass('selected');
$('.load-table').prop('disabled',true);
}
});
Demo

Use attr() property of jquery.
$(".list-group-item").click(function () {
$('.list-group-item').removeClass('selected');
$(this).addClass('selected');
if ($("button").attr("disabled") === "disabled") {
$("button").attr("disabled", false);
}
});
$(document).on('click', function (e) {
if ($(e.target).closest(".list-group-item, .load-table").length === 0) {
$('.list-group-item').removeClass('selected');
$("button").attr("disabled", true);
}
});
Above code should work. When the item is clicked then check if the button is still disabled. If it is then enable the button.
Same goes when the user click outside the list.
Fiddle

How to toggle hover event for another selector on click?

Please take a look at this fiddle
Would anyone please tell me how to enable a hover event for the table cells on clicking the button #edit_mode and disable it on another click?
<button id='enable_mode'>Enable</button>
<table>
<tbody>
<tr><td>Package</td><td>1</td></tr>
<tr><td>Cost</td><td>900</td></tr>
</tbody>
</table>
jQuery:
$('#enable_mode').click(function(){
$(this).text(function(i, text){
return text === "Enable" ? "Enable" : "Disable";
})
var see = $(this).text()
if($(this).text() == "Enable"){
hoverme($('table tbody tr td:nth-child(2)'));
}else{
????
}
});
function hoverme(para) {
$(para).hover(
function() {
$(this ).append('<div id="edit">Edit</div>' );
}, function() {
$( this ).find('#edit').remove();
}
);
}

This might be what you want to achieve: JSFiddle
And here's the corresponding code. HTML and CSS code stays the same, I've just added a few more rows for clarity, and some padding and margin.
JS:
$('#enable_mode').click(function () {
//Check the text of the button
$(this).text(function (i, text) {
if (text === "Enable") {
//Enable hover state with events on mouseenter and mouseleaves
$("tr").hover(function () {
//On mouseenter, change background color (= hover state)
$(this).css("background-color", "#DDD");
}, function () {
//On mouseleave, change background color to default
$(this).css("background-color", "white");
});
} else if (text === "Disable") {
//Remove mouseenter and mouseleave events.
$("tr").unbind('mouseenter mouseleave');
}
//Toggle the text in the button
return text === "Enable" ? "Disable" : "Enable";
});
});
You can modify this code to do practically anything on hover, including appending things (like you wanted to do).

I have modified your code little bit to achieve your what DEMO
Code:
var para = $('table tbody tr td:nth-child(2)');
$('#enable_mode').click(function()
{
var that = $(this);
if($(this).text() == "Enable")
{
para.bind('mouseover', mouseOver).bind('mouseout', mouseOut);
that.text("Disable");
}
else
{
para.unbind('mouseover mouseout');
that.text("Enable");
}
});
function mouseOver() {
$(this).append('<div id="edit">Edit</div>' );
}
function mouseOut() {
para.find('#edit').remove();
}

Tick a checkbox in a table cell by clicking anywhere in the table cell and change background color of that cell

Basically, I have a table with each cell containing a checkbox. I want to be able to tick the checkbox by clicking anywhere within the cell and change the color of that cell which I have done.
Now the problem is that when I tick the checkbox and then untick it, that cell is not getting that cell color back, as in the when the checkbox is unticked its cell color should be back to white. Can anyone help me? Help would be highly appreciated.
Here is my fiddle http://jsfiddle.net/UcDMW/50/
$(function () {
$('table tr td').on('click', function (e) {
if (e.target.type == "checkbox") {
if ($(this).is(':checked')) {
$(this).attr('checked', false);
$(this).css('background-color', 'white');
} else {
$(this).attr('checked', true);
$(this).css('background-color', '#DFF0D8');
}
return;
} else {
if ($(this).find('input:checkbox').is(':checked')) {
$(this).css('background-color', 'white');
$(this).find('input:checkbox').attr('checked', false);
} else {
$(this).find('input:checkbox').attr('checked', true);
$(this).css('background-color', '#DFF0D8');
}
}
});
});

You can simply accomplish your task by the following snippet,
Try,
$('table tr td:has(:checkbox)').on('click', function (e) {
$(this).toggleClass('className');
if($(e.target).is(':checkbox')){ return; }
var checked = $(this).find(':checkbox')[0].checked;
$(this).find(':checkbox')[0].checked = !checked;
});
Cached version
$('table tr td:has(:checkbox)').on('click', function (e) {
$(this).toggleClass('className');
if($(e.target).is(':checkbox')) return;
var checkBox = $(this).find(':checkbox')[0];
checkBox.checked = !checkBox.checked;
});
DEMO

You could restructure like this
$('table tr td').on('click', function(e){
var checkbox = $(this).find('input:checkbox');
if (!$(e.target).is(':checkbox')) {
checkbox.prop('checked', !checkbox.is(':checked'));
}
$(this).css('background-color', checkbox.is(':checked')?'#DFF0D8':'white');
});
DEMO

You can change your js to this:
working demo
EDIT: now working also when clicking on td cells.
$(function(){
bindCells();
});
function bindCells() {
$('table tr td').on('click', function (e) {
var check = (e.target.type=="checkbox") ? e.target : $(this).find("input:checkbox").get(0);
$(check).attr('checked', !check.getAttribute('checked'));
$(this).css('background-color', (check.checked) ? '#DFF0D8' : "#FFFFFF");
});
}

alert($(this).is(':checked')); Use it and check the value. It returns false when you check or uncheck the box. This because you use isChecked on table elements(table,tr,td)
Change
if ($(this).is(':checked')) {
in line 4 to
if ($(e.target).is(':checked')) {

How to avoid events on elements behind others in HTML and JavaScript/jQuery

I have a table with some div's inside it.
I want an event to happen when I click on a td element, but I also want an event to happen when I click on a div element.
As you can see in this fiddle http://jsfiddle.net/rkGkp/1/ my problem is, when I click on the div element, both the div and td event is triggered, but I only want the div's event to be triggered.
I use these event listeners
$(function() {
$("#div").on("click", function() {
alert("a div is clicked");
});
});
$(function() {
$(".td").on("click", function() {
alert("a td is clicked");
});
});
What can I do to avoid the element behind my div to trigger an event?

Have a look here: FIDDLE
I used stopPropagation()
CODE
$("#div").on("click", function(event) {
event.stopPropagation();
alert("a div is clicked");
});

This is the easiest way to achieve what you need. Simply check if the click target is on the div:
$(function() {
$("#div").on("click", function() {
alert("a div is clicked");
});
});
$(function() {
$(".td").on("click", function(e) {
if(!$(e.target).is("#div")){
alert("a td is clicked");
}
});
});