Multi checkbox requirement enable disable dropdown box using jquery

Question

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.

Could you provide the markup including the checkbox? It sounds like you need a simple && operator in your conditional statement, but to give a better answer, the markup would be helpful. — kinakuta
– kinakuta, Commented Aug 22, 2014 at 5:04

adeneo · Accepted Answer · 2014-08-22 05:05:51Z

3

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

answered Aug 22, 2014 at 5:05

adeneo

319k29 gold badges410 silver badges392 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

roadzy Over a year ago

Since this works how would i add a 3 element in the mix which is a drop down box (2 checkboxes and 1 dropdown) to check if it is selected? Once that is selected I then enable the final box. Now the form can be submitted.

roadzy Over a year ago

can you flip this from being enable to disable to disable to enable?

roadzy Over a year ago

here is the last thing i'm trying to accomplish... check the first box and 2nd to enable the 3rd to choose from a dropdown, finally enabling the last box to be selected -> jsfiddle.net/0cfmv19t/5

roadzy Over a year ago

while working through all the different possibilities, I did run into a problem. Its when i go to a page that box 1, box2, and dropdown are are already have an active value, the last box should be enabled allowing the user to check it. Right now it disabled until i select a different value for the dropdown and it becomes active.

Viswanath Donthi · Accepted Answer · 2014-08-22 05:13:20Z

0

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);  
         }
     );
});

answered Aug 22, 2014 at 5:13

Viswanath Donthi

1,8211 gold badge12 silver badges12 bronze badges

Collectives™ on Stack Overflow

Multi checkbox requirement enable disable dropdown box using jquery

2 Answers 2

4 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related