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
Related
Im currently trying to combine two if functions but somehow I only get errors. I already tried multiple ways of combining them with no result.
What I wanna do: I need to check if body has a specific class, if yes, a checkbox needs to be be unchecked.
What I tried to combine:
if (document.body.classList.contains('thatClass')) {
// do some stuff
}
$(function() {
$(document).on("click", function(e) {
if ($(e.target).is(".main-nav-slideout") === false) {
$("#main-nav-toggle").prop("checked", false);
}
});
});
My try on combining the snippets:
$(function() {
$(document).on("click", function(e) {
if (document.body.classList.contains('thatClass')) && ($(e.target).is(".main-nav-slideout") === false) {
$("#main-nav-toggle").prop("checked", false);
}
});
});
You could shorten it and just call the function when you need.
$(function() {
checkCheckbox()
$(document).on("click", '.main-nav-slideout', checkCheckbox)
});
function checkCheckbox() {
$("#main-nav-toggle").prop("checked", $('body').hasClass('thatClass'));
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body class='thatClass'>
<input type='checkbox' id='main-nav-toggle' />
<div class='main-nav-slideout'>Click me</div>
</body>
Try this:
$(function() {
$(document).on("click", function(e) {
if (document.body.getAttribute('class').split(' ').indexOf('thatClass')>-1 && ($(e.target).is(".main-nav-slideout") === false) {
$("#main-nav-toggle").prop("checked", false);
}
});
});
I'm trying to hide an element if some specific value of input is not found on the site.
I can hide an element by:
$(document).ready(function() {
$("#someid").hide();
});
But how to show it, if the value is found? I'm trying to do something like this:
$(document).ready(function() {
$("#someid").hide();
$("input[value$='somevaluetobefound']").ready(function() {
$("#someid").show();
});
});
What am I doing wrong?
Try this:
$(document).ready(function() {
$("#someid").hide();
$('#inputID').on('input', function() {
if ( $('input').val() === 'test') {
$("#someid").show();
}
else $("#someid").hide();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Type 'test' to show DIV<br>
<input id="inputID" type="text">
<div id="someid">DIV</div>
I had not fully understood what you where trying to acomplish:
$( document ).ready(function() {
if (!$('input[value="somevaluetobefound"]'))
$("#someid").hide();
$(':input').on('keyup', function(){
if ($(this).val() == 'somevaluetobefound')
{
$("#someid").show();
} else {
$("#someid").hide();
}
});
});
I have updated the code here
EDIT: Based on new info provided by OP
$( document ).ready(function() {
if ($(':radio[value="somevaluetobefound"]').length !== 0)
$("#someid").show();
else
$("#someid").hide();
});
Sample here
<script type="text/javascript">
$(document).ready(function () {
$("input[value=somevaluetobefound]").closest('#someid').hide();
});
</script>
you can try this :
$(document).ready(function() {
$("#someid").hide();
if($("#someid").val() !=''){
$("#someid").show();
}
});
Improvising on #Arkej's answer:
$(document).ready(function() {
$("#someDiv").hide();
$(':input').on('input', function() {
if ( $('input').val() === 'somevalue') {
$("#someDiv").show();
}
else $("#someDiv").hide();
});
});
Here I am using :input to find all input boxes on the page. Since you need to either have an ID the input field you want or just have all input text boxes be used to show or hide your div depending on what the value you are looking for.
Also refer to this for guidance on getting val from inputs:
Get the value in an input text box
Cheers
I all,
I have this code
<select id = 'jack'>
<option id = 'test1' >test1</option>
<option id = 'test2' >test2</option>
</select>
<input id="calendar" type="text" disabled="disabled"/>
and this is the javascript
function enableEnd() {
end.attr('disabled', !this.value.length).datepicker('option', 'minDate', this.value);
}
var end = $('#calendar').datepicker();
$('#jack').datepicker({
onSelect: enableEnd
}).bind('input', enableEnd);
I would make sure that the schedule is active when I choose from the menu test1 while I would like to remain disabled if I choose test2
If i understood your question, you are looking for this.
var calendar = $("#calendar").datepicker("option", "disabled", true);
$("#jack").on('change', function () {
if($(this).val() == 'test1') {
calendar.datepicker( "option", "disabled", false);
} else {
calendar.datepicker( "option", "disabled", true);
}
});
You can simply do it this way:
$('#jack').on('change', function(e){
var val = $(this).val();
$('#calendar').attr('disabled', val == 'test2');
});
If you want to activate the calendar when test1 is selected, try something like this:
$(document).ready(function(){
$('#jack').on('change', function (e) {
if($('#jack').val()=="test1"){
// enable the calendar
$('#calendar').datepicker({
format:"mm-dd-yyyy",
autoclose: true
});
}else{
$('#calendar').datepicker('remove');
}
});
});
jQuery's "change" is the way to go, I think. Then you've got a one-liner :
$('#jack').change(function() {
$('#calendar').attr('disabled', $(this).val() == 'test2');
});
Fiddle here showing the desired behaviour : http://jsfiddle.net/y6pu4dwu/1/
Note : I'd suggest removing the "disabled" by default, since test1 will be selected at first.
Edit : this disables the HTML element itself, but the plugin exposes an API to disable (see other answers), so this is not the only way.
I have some problems using following method to select all checkboxes.
I'm using this example:
$(document).ready(function(){
$('.check:button').toggle(function(){
$('input:checkbox').attr('checked','checked');
$(this).val('uncheck all')
},function(){
$('input:checkbox').removeAttr('checked');
$(this).val('check all');
})
})
HTML
<input type="button" class="check" value="check all" />
<input type="checkbox" class="cb-element" /> Checkbox 1
<input type="checkbox" class="cb-element" /> Checkbox 2
<input type="checkbox" class="cb-element" /> Checkbox 3
But the button fades out when entering the web page in jQuery 1.11.
What would be a fix for this?
This use of toggle() was removed in jQuery 1.9... so you may have to use .click() if you are using jQuery >= 1.9 like
$(document).ready(function () {
$('.check:button').click(function () {
$('input[type="checkbox"]').prop('checked', this.value == 'check all');
$(this).val(function () {
return this.value == 'check all' ? 'uncheck all' : 'check all';
})
})
})
Demo: Fiddle
FYI the toggle event was removed in jQuery 1.9. See api.jquery.com/toggle-event. Instead, try:
var checked = false;
$('.check:button').click(function () {
checked = !checked;
$('input:checkbox').prop('checked', checked);
$(this).val(checked ? 'uncheck all' : 'check all')
});
jsFiddle example
Try this:
$('.check:button').click(function(){
if($('input:checkbox:checked').length!=$('input:checkbox').length){
$('input:checkbox').prop('checked',true);
$(this).val('uncheck all');
}else{
$('input:checkbox').prop('checked',false);
$(this).val('check all');
}});
Working Demo
Use .prop and modify your jquery code to the below. Though this use click event
$(document).ready(function () {
$('.check:button').click(function () {
if ($(this).val() == "check all") {
$('input:checkbox').prop('checked', true);
$(this).val('uncheck all');
} else {
$('input:checkbox').prop('checked', false);
$(this).val('check all');
}
});
});
Demo:http://jsfiddle.net/AmitJoki/JJ9XR/1/
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/