Develop Reference

Add active class without any click or pressing any key(checkbox)

I want the checkbox field should add an active class to its label if it is checked. I have done everything like when check it adds class to label and when not checked it does not add the active class.
But my point is when the code is
<label class="define--area--label"><input type="checkbox" checked ><label>
then it does not add the active class to the label.
here is my code
$('.define--area--label > input').change(function() {
if ($(this).is(':checked')) {
$(this).parent().addClass('active');
} else {
$(this).parent().removeClass('active');
}
});
Full Example

I think you have to trigger change event through JavaScript after document loaded.
$(document).ready(function(){
$('.define--area--label > input').change(function() {
if ($(this).is(':checked')) {
$(this).parent().addClass('active');
} else {
$(this).parent().removeClass('active');
}
});
$('.define--area--label > input:checked').trigger('change');
})

$(document).ready(function(){
$('.define--area--label > input').each(function() {
if($(this).is(':checked')){
$(this).parent().addClass('active');
}
});
});

Click one item on a row only

Is it possible to disabled the other buttons in a row, when I have selected at least one?
$('.bet-offer div.option').click(function(){
if ($(this).hasClass('selected')) {
$(this).removeClass('selected');
} else {
$(this).addClass('selected');
}
});
The result should be the user can click on any buttons in a row, but once clicked, the other items on that row should be disabled already. However, the user can still select buttons from the other items in other rows.
Here's the sample fiddle: http://jsfiddle.net/1vuf1gm7/3/
Thanks!

buttons are nothing but siblings of each other in parent div. you can use .siblings() to target other button and remove the class selected from it.
also you should use .toggleClass() instead of add/remove with hasClass condition:
$('.bet-offer div.option').click(function(){
$(this).siblings('.option').removeClass('selected')
$(this).toggleClass('selected')
});
Working demo

Try something like this:
$('.bet-offer div.option').click(function(){
if ($(this).hasClass('selected')) {
$(this).removeClass('selected');
$('.bet-offer div.option.disabled').removeClass("disabled");
} else {
$(this).addClass('selected');
$('.bet-offer div.option:not(.selected)').addClass("disabled");
}
});
This will add a disabled class to all the non-selected options.

This will disable the other buttons in the same row while one button has the class selected:
$('.bet-offer div.option').click(function(){
if ($(this).hasClass('selected')) {
$(this).removeClass('selected');
$(this).siblings().css('pointer-events', 'auto');
} else {
$(this).addClass('selected');
$(this).siblings().css('pointer-events', 'none');
}
});

jQuery .on() tr click event using .not() on tr checkbox click?

So my title may be confusing, but it has the right details. I have a table with clickable rows. When clicking the row, the row highlights. The table also has a checkbox column. Clicking the checkbox should NOT highlight or remove highlight from the row. How can I properly use .not() or :not in the .on('click', 'tr', function(){ ... }) ? http://jsfiddle.net/vmu0p2oe/
$('table').on('click', 'tr', function () {
if ($(this).hasClass('selected')) {
$(this).removeClass('selected');
//$(this).find(":checkbox").prop("checked", false);
}
else {
$('tr.selected').removeClass('selected');
$(this).addClass('selected');
//$(this).find(":checkbox").prop("checked", true);
}
});

Add this to the beginning of the handler:
if($(e.target).is('input[type=checkbox]')) {
return;
}
This will stop the handler from running if the element clicked is a checkbox.
Fiddle: http://jsfiddle.net/vmu0p2oe/1/

Add a handler for the checkbox that uses stopPropagation() to prevent the click from bubbling out to the tr:
$('table').on('click', ':checkbox', function(e) {
e.stopPropagation();
});
DEMO

How about this:
$('table').on('click', 'tr', function (e) {
var el = e.target;
if ( el.type !== "checkbox"){
if ($(this).hasClass('selected')) {
$(this).removeClass('selected');
//$(this).find(":checkbox").prop("checked", false);
} else {
$('tr.selected').removeClass('selected');
$(this).addClass('selected');
//$(this).find(":checkbox").prop("checked", true);
}
}
});
fiddle

If this is checked on click undisable btn but if its unchecked again disable it

is there a better way to do this.
$('#termsAccept[type="checkbox"]').click(function() {
if ($(this).is(':checked')) {
$('#qBtn').prop('disabled',false);
}
$('#termsAccept[type="checkbox"]').click(function() {
if ($(this).not(':checked')) {
$('#qBtn').prop('disabled',true);
}
I want to combine the two into one click function

You can do
$('#termsAccept[type="checkbox"]').click(function() {
$('#qBtn').prop('disabled', !this.checked);
});
As #Karl-André Gagnon's suggestion, you should use change event for your checkbox instead of click:
$('#termsAccept').change(function() {
$('#qBtn').prop('disabled', !this.checked);
});
As well as id is unique so you just need #termsAccept.

$('#termsAccept[type="checkbox"]').click(function() {
if ($(this).is(':checked')) {
$('#qBtn').prop('disabled',false);
}
else {
$('#qBtn').prop('disabled',true);
}
});

in body click div hide, when i click on div also it hide

I want to show a div on link click and hide if click outside the link or div.
login
<div class="login-panel">
<input type="text" id="LoginForm_username" name="LoginForm[username]" class="field" value="username">
<input type="password" id="LoginForm_password" name="LoginForm[password]" class="field" value="password">
<input type="submit" value="Login" class="loginBtn">
</div>
initially div is hidden. and script is
$(document).ready(function() {
$("#login").click(function () {
$("div.login-panel").toggle();
});
$("body").click(function(e){
if(e.target.className == "login" || e.target.className == "login-panel") {
//alert("do't hide");
}
else {
$(".login-panel").hide();
}
});
});
when I click on link div shows and overlaps some other elements, and when I click outside the body it dies.
But the problem is when I click on input box to enter username login-panel div get hides.
why div hide?
any guidance will be appreciated.

http://jsfiddle.net/thirtydot/F4p2x/15/
$(document).ready(function() {
$("#login").click(function(e) {
$(".login-panel").toggle();
e.stopPropagation();
});
$(document).click(function(e) {
if (!$(e.target).is('.login-panel, .login-panel *')) {
$(".login-panel").hide();
}
});
});

You should do it like this:
http://jsfiddle.net/VWENB/1/
$("#login").click(function(e) {
$("div.login-panel").toggle();
e.stopPropagation();
});
$("body").click(function(e) {
if (e.target.className == "field") {
//alert("do't hide");
} else {
$(".login-panel").hide();
}
});​

When you are clicking on a sub-element, your condition (e.target.className) is not applied to your parent element (<div class="login-panel">). But you can use the closest function of jQuery (see here) in order to test if you are in your parent element :
if(e.target.className == "login" || $(e.target).closest(".login-panel").length === 1) {
...
}

PROBLEM is when i click on input box to enter username login-panel div
get hides. why div hide?
Because, you clicked the body too, when clicking in the div. Then both events are triggered. Check out event.stopPropagation() which you may use in the else part of body.onclick.

That because your input lies inside #login div, so if you click inside this div it will hide. So you can use jquery :not selector to specify those excluded elements
$(document).ready(function () {
$("#login,:not('#LoginForm_username'),:not('#LoginForm_password')").click(function () {
$("div.login-panel").toggle();
});
$("body").click(function (e) {
if (e.target.className == "login" || e.target.className == "login-panel") {
//alert("do't hide");
} else {
$(".login-panel").hide();
}
});
});​
DEMO

Here you go:
$(document).ready(function () {
$("#login").click(function () {
$("div.login-panel").toggle();
});
$("body").click(function (e) {
if (e.target.nodeName != "INPUT" && e.target.className!= "login" && e.target.className!= "login-panel") {
$(".login-panel").hide();
}
});
});​
You were using the wrong selector in your if to check if a click on the body wasn't targeting a input element.
Fiddle

Just find mouse when the click event occur,
<script type="text/javascript">
find_mouse = false;
$(document).ready(function()
{
$('.login-panel').hover(function(){
find_mouse=true; // if mouse on login-panel
}, function(){
find_mouse=false; // not on login panel
});
$("body").click(function(){
if(! find_mouse) // if not on login panel
$('.login-panel').hide();
});
});
</script>

As the other saying clicking input cause event triggering in the body so you should check if the sender is child of the login I think below code do the trick;
$("body").click(function (e) {
var $sender = $(e.target);
if ($sender.closest(".login-panel").length) {
return ;
}
$(".login-panel").hide();
});
Edit : update the condition with closest as it is correct function.
Begins with the current element, Travels up the DOM tree until it finds a match for the supplied selector. The returned jQuery object contains zero or one element for each element in the original set.