We Keep Coding

Multi checkbox requirement enable disable dropdown box using jquery

So first off I did search and I found this Enable/Disable a dropdownbox in jquery which got me on the right track. I'm new to jquery so when seeing other code I can adapt it to fit and work for me.
So what i'm asking is how do you make it check to see if two check boxes condition are true?
<script>
$(document).ready(function() {
$("#box1").click(function() {
if ($(this).is(":checked")) {
$("#tech1").prop("disabled", false);
} else {
$("#tech1").prop("disabled", true);
}
});
});
</script>
I want it to be if box1 and box2 are checked enable this box? I understand you can do it with an if statement, but I'm not sure where exactly it goes. Thanks in advance.
Would this work:
$("#box1").click(function() {
if ($(this).is(":checked")) &&
$("#box2").click(function() {
if ($(this).is(":checked"))
I doesn't work and I assume thats because that above creates two functions and not the if statement that I need.

Include both in the event handler, and check if both are checked
$(document).ready(function() {
var boxes = $("#box1, #box2");
boxes.on('change', function() {
var disabled = boxes.filter(':checked').length === boxes.length;
$("#tech1").prop("disabled", disabled);
});
});
FIDDLE

Consider box1 & box2 checkboxes defined with a css class boxes as below:
<input type="checkbox" id="box1" class="boxes" />
<input type="checkbox" id="box2" class="boxes" />
Now you can use box class as jquery selector to do your task
<script>
$(document).ready(function() {
$(".boxes").click(function(){
if($(".boxes:checked").size() == $(".boxes").size()){
$("#tech1").prop("disabled", false);
}else{
$("#tech1").prop("disabled", true);
}
);
});

Make div appear (or disappear) on checkbox status

I have this jQuery code:
$(document).ready(function(){
$('.checkdisplay').change(function(){
if(this.checked)
$('.todisplay').fadeIn('slow');
else
$('.todisplay').fadeOut('slow');
});
});
This works great only if I check the .checkdisplay radio button: the div appears, but after, if i uncheck .checkdisplay radio button, the div .todisplay doesn't disappear.
Where i'm wrong? :(
EDIT:
demo: http://jsfiddle.net/Mse2L/

You need to test all the radios and only show on the one with the correct class
You could have used ID too
Notice I use .on("click" since change needs a blur in some browsers
Live Demo
$(function(){
$("input[name='roomdoor']").on("click",function(){
if ($(this).hasClass("checkdisplay") && this.checked)
$('.todisplay').fadeIn('slow');
else
$('.todisplay').fadeOut('slow');
});
});

$(document).ready(function () {
$('.radio').change(function () {
if ($(this).hasClass('checkdisplay') && this.checked) $('.todisplay').fadeIn('slow');
else $('.todisplay').fadeOut('slow');
});
});
Demo
The problem is, you can't uncheck a radiobutton.

Problem is your radio button, you should use checkbox like,
Once a radio button having class checkdisplay is checked then it will be checked, how it can be unchecked
<input type='checkbox' class='checkdisplay' />
<div class='todisplay'>test</div>
Demo
Updated, try this like,
$(document).ready(function(){
$('.radio').change(function(){// add onchange on radio class
// check the radio has checkdisplay class or not
if($(this).hasClass('checkdisplay') && this.checked)
$('.todisplay').fadeIn('slow');
else
$('.todisplay').fadeOut('slow');
});
});
Working demo

$('.checkdisplay').click(function() {
if( $(this).is(':checked')) {
$(".todisplay").fadeIn('slow');
} else {
$(".todisplay").fadeOut('slow');
}
});

jQuery/js Removing a dynamically created checkbox

I'm using Eric Hynds jQuery MultiSelect Widget that is being populated from a javascript file. A checkbox is created with label attached under a 'Main' checkbox if a Main is checked. How can I set it up to where the dynamically created checkbox removes if that corresponding Main is unchecked? Please see my fiddle to illustrate my problem http://jsfiddle.net/3u7Xj/76/
$(document).ready(function() {
$(".multiselect").multiselect({
header: "Choose up to 5 areas total",
click: function (event, ui) {
var number1=$("#dropdown1").children(":checked").length,
number2=$("#dropdown2").children(":checked").length;
if (ui.checked && ((number1 + number2 >=2) || $(this).children(":checked").length >= 2)) {
return false;
}
var lbl = ui.value;
if(ui.checked){
var ctrl = '<input type="checkbox" name="chk" checked="checked" class="chk" id="'+lbl+'">';
$("[id^=Main]:checked").each(function(){
$(this).nextAll('.holder:first').append('<div>'+ctrl+lbl+'</div>');
});
}
else {
$("[id^=Main]:checked").each(function(){
$(this).nextAll('.holder:first').find('div input[id="'+lbl+'"]').parent().remove();
});
}
},
selectedList:5
});
});
Something like this?
$("[id^=id]:checked",false).each(function(){
$(this).nextAll('.holder:first').find('div input[id="'+lbl+'"]').parent().remove();
});
Or
if(ui.checked = false){
$(this).nextAll('.holder:first').find('div input[id="'+lbl+'"]').parent().remove();
}
else{};

how about adding this?
$("input[name^=chkMain]").change(function(){
if($(this).not(':checked')){
$(this).next('label').next('.holder').html('');
}
});
http://jsfiddle.net/3u7Xj/77/
is that what you meant?

Try this
else {
$("[id^=Main]:checked").each(function(){
$(this).nextAll('.holder:first').find('#' + lbl).parent().remove();
})
}
Demo
I also added a functionality that unchecks the children of a main if it is unchecked. Remove the code
$(".checkers").click(function() {
if(!$(this).is(':checked')) {
$(this).nextAll('.holder:eq(0)').find('div input').attr("checked", this.checked);
}
});
if you don't want that functionality. You could also change .attr("checked", this.checked) to .parent().remove() if you wanted to remove the check boxes instead
If you wanted to do the opposite, meaning check the boxes then the Main, you could use the following
var checkedOnes = $('#dropdown1').nextAll('.ui-multiselect-menu').find('ul li input:checked');
for(var i = 0; i < checkedOnes.length; i++) {
var lbl = checkedOnes.eq(i).attr('value');
var ctrl = '<input type="checkbox" name="chk" checked="checked" class="chk" id="'+lbl+'">';
$("[id^=Main]:checked").each(function(){
$(this).nextAll('.holder:first').append('<div>'+ctrl+lbl+'</div>');
});
}
Updated Demo

Enable button when checkboxes selected

I have multiple checkboxes and a submit button that is initially disabled. When checking a box the button is enabled and when unchecking, the button is disabled again.
If have multiple checkboxes selected but uncheck one, the button becomes disabled even though I have selected other checkboxes. How can I fix this issue?
<script type="text/javascript">
$(function() {
$(".checkbox").click(function() {
$(".delete").attr("disabled", !this.checked);
});
});
</script>
HTML
<input type="checkbox" name="msg[]" value="32" class="checkbox" />
<input type="checkbox" name="msg[]" value="44" class="checkbox" />
<input type="checkbox" name="msg[]" value="26" class="checkbox" />
<button type="submit" class="delete" disabled="disabled">Delete</button>

$(function() {
$(".checkbox").click(function(){
$('.delete').prop('disabled',$('input.checkbox:checked').length == 0);
});
});
Demo: http://jsfiddle.net/AlienWebguy/3U364/

Implement a counter to track how many are checked, rather than just disabling the button. Add 1 every time a box is checked, and subtract 1 every time a box is unchecked. Once the counter hits 0, disable the button. When it changes to 1, enable the button (if it changes to any higher number it will have already been enabled, so you don't need to enable it every time). Sample:
<script type="text/javascript">
var boxcounter;
$(function() {
boxcounter = 0;
$(".checkbox").click(function() {
if(this.checked) {
counter++;
if(counter == 1){
$(".delete").attr("disabled", "");
}
} else {
counter--;
if(counter == 0){
$(".delete").attr("disabled", "disabled");
}
}
}
}
</script>

Try this where I am basically checking if all the checkboxes are not checked then disable the button.
$(function() {
$(".checkbox").click(function() {
$(".delete").attr("disabled", !$(".checkbox:checked").length);
});
});

You need to check the state of the other boxes each time 1 box is toggled.

You can build an array of every checkbox.
Then, loop through testing for checked, and exit the loop on checked (this is what you care about).
If you reach the end of the loop and checked for all was false, then disable the button.
This will prevent one uncheck from disabling the button.
You're currently only checking "this" checkbox rather than all.

This code is Actually works without any error.
var boxcounter;
$(function() {
let boxcounter = 0;
$(".cgv-checkbox").click(function() {
if(this.checked) {
console.log('checked');
boxcounter++;
if(boxcounter == 3){
$("#register_form_Register").removeAttr("disabled");
}
} else {
boxcounter--;
if(boxcounter < 3){
$("#register_form_Register").attr("disabled", "disabled");
}
}
});
});
This will work with multiple checkboxes as well.

jQuery change checkbox button text when clicked

I have some jQuery checkbox buttons, and they work fine. However, I would like to change their text upon a click. for example: the button's text is "click me". when the user clicks it, i needs to change to "thanks for clicking", for example.
This is what I am trying using:
<script>
$(function() {
$("#button").button();
$("#button").click(function(){
if($("#label").is(':checked')) {
$("#label span").text("Hide");
}
else {
$("#label span").text("Show");
}
});
});
</script>
<input id='button' type='checkbox' />
<label id='label' for="button">Show/Hide</label>

This is your first problem:
if($("#label").is(':checked')) {
<label> elements don't get "checked" only their checkboxes do. Change it to:
if (this.checked) {
In the code above, this refers to the checkbox element that has been clicked, and we're looking to see if the checked property contains the value true. It's much more efficient that .is(':checked').
Also, the <label> element has no <span> child, it just has text, so
$("#label span").text("Hide");
should be
$("#label").text("Hide");
But you could shorten the whole thing using the ternary conditional operator:
$("#button").click(function(){
$("#label").text(this.checked ? "Hide" : "Show");
}
Working demo: http://jsfiddle.net/AndyE/qnrVp/

$("#button").click(function() {
if($(this).is(':checked')) {
$("#label").text("Hide");
} else {
$("#label").text("Show");
}
});
And here's a live demo.

Try this:
$("#button").click(function(){
var th = $(this);
if(th.is(':checked')) {
$("label[for=" + th.attr('id') + "]").text("Hide");
} else {
$("label[for=" + th.attr('id') + "]").text("Show");
}
});