Develop Reference

Disabling submit button until multiple checkboxes are checked

I would like to disable a form submit button until 4 checkboxes are checked. I created a quick jsfiddle to represent my code that is not working as expected.
Here is my JS:
$(function() {
$("#question1, #question2, #question3, #question4").change(function() {
if( $("#question1").checked && $("#question2").checked && $("#question3").checked && $("#question4").checked ) {
$('.next_button').disabled = false;
}
else {
$('.next_button').disabled = true;
}
});
});
And the HTML:
<input id="question1" name="question1" type="checkbox" value="1">
<input id="question2" name="question2" type="checkbox" value="1">
<input id="question3" name="question3" type="checkbox" value="1">
<input id="question4" name="question4" type="checkbox" value="1">
<input class="next_button" name="commit" type="submit" value="Next" disabled="">
I am missing something simple here. Appreciate any thoughts!

Two issues here.
First, .checked is a Javascript attribute so using it on jQuery object wouldn't work. You will need to use jQuery's .is(':checked') call instead.
Second, on the JSFiddle you posted, you were using jQuery version 1.4.4, which didn't have .prop() support for the disabled attribute, thus you will need to use the attr() function to toggle the disabled state, instead.
See the updated function below:
$(function () {
$("#question1, #question2, #question3, #question4").change(function () {
if ($("#question1").is(':checked') &&
$("#question2").is(':checked') &&
$("#question3").is(':checked') &&
$("#question4").is(':checked') ) {
$('.next_button').attr('disabled', false);
} else {
$('.next_button').attr('disabled', true);
}
});
});
Working code at: JSFiddle

Try this
$(function() {
$("#question1, #question2, #question3, #question4").on( 'change', function() {
$('button.next_button').prop( 'disabled', $(':checkbox:checked').length === 4);
});
});

You have used old jQuery version 1.4 in Fiddle demo, so new function will not work properly
please try this way..
$(function() {
$("input[type=checkbox]").bind("click", function(e){
if($("input[type=checkbox]").serializeArray().length ==
$("input[type=checkbox]").length){
$(".next_button").removeAttr('disabled');
}else{
$(".next_button").attr('disabled', "disabled");
}
})
});
FIDDLE DEMO
I would preferred single selector e.g. class, element type instead of repeated ids of all elements

Instead of $('.next_button').disabled = false;, try using $('.next_button').prop("disabled", false); - likewise for setting it true. Some properties are removed, not set to false, so using the prop syntax will handle this for you.

Use this function
$(function() {
$("#question1, #question2, #question3, #question4").change(function() {
if( $('#question1').attr('checked') && $('#question2').attr('checked') && $('#question3').attr('checked') && $('#question4').attr('checked') ) {
$('.next_button').removeAttr('disabled');
}
else {
$('.next_button').attr('disabled','disabled');
}
});
});
Here is the fiddle link http://jsfiddle.net/CPFns/51/

I have updated your fiddle
Here is what I have changed in your code:
$(function() { $("#question1, #question2, #question3, #question4").change(function() {
if( $("#question1").attr('checked') && $("#question2").attr('checked') && $("#question3").attr('checked') && $("#question4").attr('checked') ) {
$('.next_button').attr("disabled",false);
}
else {
$('.next_button').attr("disabled",true); } });});
Thanks

try this
$(function() {
$('input[type="checkbox"]').change(function(){
if($('input[type="checkbox"]:checked').length >= 4){
$('.next_button').removeAttr('disabled');
}
else{
$('.next_button').attr('disabled', 'disabled');
}
});
});

Use
$(function() {
$(':checkbox').on( 'change', function() {
if( $(':checkbox:checked').length === 4 ) {
$('input.next_button').prop( 'disabled', false );
} else {
$('input.next_button').prop( 'disabled', true );
}
});
});
JS FIDDLE DEMO

You may try this:
$(function () {
$("input[name^=question]").change(function (e){
e.stopPropagation();
var toDisabled = (4 !== $("input[name^=question]:checked").length);
$(".next_button").prop('disabled', toDisabled);
});
});
DEMO

Jquery Check all checkbox

Why does my check all button work once and doesn't work at 3rd click.
the check all button only works at firts click. I check the dom and its updating but the view does. What is the cause of the problem?
FIDDLE
jQuery('.sp_country').click(function () {
var checkbox = $(this).find(":checkbox"),
checked = checkbox.is(":checked");
checkbox.prop("checked", !checked);
});
jQuery('.sp_country input:checkbox').on('click', function (e) {
e.stopImmediatePropagation();
var checked = (e.currentTarget.checked) ? false : true;
e.currentTarget.checked = (checked) ? false : checked.toString();
});
jQuery('#bt_checkbox').click(function (e) {
e.stopImmediatePropagation();
if (jQuery(this).val() === 'Uncheck All') {
jQuery('#country input:checkbox').removeAttr('checked');
jQuery(this).val('Check All');
} else {
jQuery('#country input:checkbox').attr('checked', 'checked');
jQuery(this).val('Uncheck All');
}
});

fiddle Demo
Change
jQuery('#country input:checkbox').attr('checked', 'checked');
to
jQuery('#country input:checkbox').prop('checked', true);
Use .prop()
Read .prop() vs .attr()

Check all check box does not works the second time in Javascript

The check all check box first time checks and unchecks well but not at the second time. The code is as follows
HTML
<th align="left" width="25" style="color:#FFF; background-color:#3A4048">
<%= check_box_tag "select_all" %>
</th>
JQUERY
$("#select_all").click(function () {
$('td input[type=checkbox]').attr('checked', this.checked);
});
Can any body help me to solve the problem

.prop() is preferred to .attr() for the checked property. Also the .change() event would be more appropriate for a checkbox.
$("#select_all").change(function () {
$('td input[type=checkbox]').prop('checked', $(this).prop('checked'));
});

Try this:
$(function () {
$("#select_all").click(function () {
$('input[type=checkbox]').prop('checked', $(this).prop('checked'));
});
});

Use $(this).prop('checked') Latest jQuery Code.
$("#select_all").click(function () {
$('td input[type=checkbox]').prop('checked', $(this).prop('checked'));
});

$("#select_all").bind('click',function () {
$('td input[type=checkbox]').attr('checked', this.checked);
});

Dropdown selection short and better code

I have made a JSFiddle just for better understanding of my question!
So no need to paste code over here everything is visible on fiddle. Ill paste JS part.
JS Fiddle
$('select[name="chooseGW"]').change(function(){
if ($(this).val() == "fileiceGW") {
$('input#fileiceGW').css('display', 'block');
} else {
$('input#fileiceGW').css('display', 'none');
}
if ($(this).val() == "adworkGW") {
$('input#adworkGW').css('display', 'block');
} else {
$('input#adworkGW').css('display', 'none');
}
if ($(this).val() == "cpaleadGW") {
$('input#cpaleadGW').css('display', 'block');
} else {
$('input#cpaleadGW').css('display', 'none');
}
});​
Ok... so my question is how to make this code better and shorten cause I believe it can be for sure... Something like match data-gateway with specified id or something...
The code in JSfiddle works just fine but its too much of duplicate I believe.
Your help is appreciated, thank you !
P.S. explanation of how your shorten code works and what for is specified thing is more then appreciated.

The simplest update would be:
$('select[name="chooseGW"]').change(function() {
var val = $(this).val();
$('input').hide();
$('#' + val).show();
});​
JS Fiddle demo.
This version assumes you want to hide all other input elements when you show the selected element. If you want previously-shown input elements to remain visible, omit the line ending in hide():
$('select[name="chooseGW"]').change(function() {
var val = $(this).val();
$('#' + val).show();
});​
JS Fiddle demo.
You can, of course, omit the creation of a (more or less-) unnecessary variable:
$('select[name="chooseGW"]').change(function() {
$('input').hide();
$('#' + $(this).val()).show();
});​
JS Fiddle demo.
References:
hide().
show().
val().

<select name="chooseGW">
<option value="noneGW">-- none --</option>
<option value="fileiceGW">Fileice Gateway</option>
<option value="adworkGW">Adworkmedia Gateway</option>
<option value="cpaleadGW">CPALead Gateway</option>
</select>
<div style="display: inline;" >
<input type="text" id="fileiceGW" style="display: none;" value="fileice()" />
<input type="text" id="adworkGW" style="display: none;" value="adwork()" />
<input type="text" id="cpaleadGW" style="display: none;" value="cpalead()" />
</div>​
var inputs = {
fileiceGW: "input#fileiceGW",
adworkGW: "input#adworkGW",
cpaleadGW: "input#cpaleadGW"
};
$(function () {
$('select[name="chooseGW"]').change(function () {
$("input").hide();
var val = $(this).val();
var selector = inputs[val];
$(selector).show();
});
});

$('select[name="chooseGW"]').on('change', function() {
$('input').hide();
if(this.value !== 'noneGW') {
$('#' + this.value).show();
}
});
http://jsfiddle.net/f0t0n/tHckA/

jQuery .select() inside .live() does not work on IE7 and IE8

jQuery(document).ready(function($) {
$('input[type="text"]').live('focus', function() {
if (this.value == 'someValue') {
this.select();
}
});
});
The same result with .delegate() and .on().
What am I missing?
Any help is appreciated.

Works fine for me using .on. Perhaps you want it to select the text when you click?
$("form").on("click", ":text", function(){
if ( $(this).val() === "someValue" ) {
$(this).select();
}
});​
Fiddle: http://jsfiddle.net/jonathansampson/nfKm7/

It kind of does work, the text just becomes deselected as soon as it has been selected when using the focus event
Using on() and an event other than focus seems to work better
see this fiddle

DEMO: http://jsfiddle.net/hjgZ3/
remove $ from function($)
<input type="text" value="someValue" />
$(function(){
$('input[type="text"]').live('focus', function() {
if (this.value == 'someValue') {
alert('hi');
//this.select();
}
});
})