CODEWITHSUNDEEP
javascriptjqueryhtmlcsstwitter-bootstrap
cpt-crunchy
cpt-crunchy

Reputation: 391

Check box toggle option

I think I may be overthinking my problem.

I have 3 checkboxes using the bootstrap-toggle css. I have 3 checkboxes but my condition is as such:

IF "Blue" and "Yellow" are checked, THEN "Green" will be checked and the other 2 will be unchecked. So long as "Green" is checked "Blue" and "Yellow" cant be checked. They don't need to disabled if "Green" is checked. I would like use a javascript file unless this can be done in less code with Jquery. Open to either.

UPDATE: I provided the shorthand version of the HTML which may have thrown off how the "toggle" is handled. Please see the edited HTML below. In this case I found that the class of the div "toggle btn btn-default" needs to be switched from "toggle btn btn-success off"

CODE SNIPPET EDITED

<div class="form-group">
   <label for="blue">Blue
   <div class="toggle btn btn-success off" data-toggle="toggle" style="width: 0px; height: 0px;">
       <input name="blue" class="button" type="checkbox" data-toggle="toggle" data-on="No" data-off="Yes" data-onstyle="default" data-offstyle="success">
           <div class="toggle-group">
                <label class="btn btn-default toggle-on">No</label>
                <label class="btn btn-success active toggle-off">Yes</label>
           <span class="toggle-handle btn btn-default"></span>
           </div>
        </div>
    </label>
</div>
<div class="form-group">
   <label for="yellow">Yellow
   <div class="toggle btn btn-success off" data-toggle="toggle" style="width: 0px; height: 0px;">
       <input name="yellow" class="button" type="checkbox" data-toggle="toggle" data-on="No" data-off="Yes" data-onstyle="default" data-offstyle="success">
           <div class="toggle-group">
                <label class="btn btn-default toggle-on">No</label>
                <label class="btn btn-success active toggle-off">Yes</label>
           <span class="toggle-handle btn btn-default"></span>
           </div>
        </div>
    </label>
</div>
<div class="form-group">
   <label for="green">Green
   <div class="toggle btn btn-success off" data-toggle="toggle" style="width: 0px; height: 0px;">
       <input name="green" class="button" type="checkbox" data-toggle="toggle" data-on="No" data-off="Yes" data-onstyle="default" data-offstyle="success">
           <div class="toggle-group">
                <label class="btn btn-default toggle-on">No</label>
                <label class="btn btn-success active toggle-off">Yes</label>
           <span class="toggle-handle btn btn-default"></span>
           </div>
        </div>
    </label>
</div>

I like the script that Mohit provide. However since the change isn't made by changing the input type, the script would have to change the div class instead. Thanks for your help guys!

<script> 
    $(document).ready(function () {
    $("input[type='checkbox']").change(function (event) {
        if(!$("input[type='checkbox'][name='blue']").is('checked') && !$("input[type='checkbox'][name='yellow']").is('checked'))
          {
            $("input[type='checkbox'][name='green']").prop('checked', true);
            $("input[type='checkbox'][name='blue']").prop('checked', false);
            $("input[type='checkbox'][name='yellow']").prop('checked', false);

          }
          else if(!$("input[type='checkbox'][name='green']").is('checked'))
          {
            $("input[type='checkbox'][name='blue']").prop('checked', false);
            $("input[type='checkbox'][name='yellow']").prop('checked', false);
          }
        });
    });
</script>

Upvotes: 0

Views: 1701

Answers (3)

Tyler Burki
Tyler Burki

Reputation: 197

I think I've got what you're looking for in the fiddle below. I've got it set up so if other colors are added (other than blue and yellow) and we want them to behave like blue and yellow we won't need to make any code changes. The logic is if green is checked => uncheck all others and don't let them be selected. If all others are checked => select green and uncheck all others. More comments are available in the code:

Fiddle w/ solution

var $green = $('.button[name="green"]'), //Get our special input, "green"
    $notGreen = $('.button').not($green); //Get all other inputs

$('.form-group').on('change', '.button', function() { //Attach handler at parent and delegate to .button class
    if (!$(this).is(':checked')) { return; } //Only want to act when something is being checked

    if ($green.is(':checked')) {
        //If green is checked, want to uncheck everything else
        $notGreen.prop('checked', false); //.prop is the best way to uncheck
    }
    else if ($notGreen.filter(':checked').length === $notGreen.length) {
        //If every other input other than green is checked, check green and uncheck everything else
        $notGreen.prop('checked', false);
        $green.prop('checked', true);
    }
});

EDIT: Here's the more generalized code from the comments that supports multiple groupings: Generalized fiddle

Check below fiddle code.

var $green = $('.button[name="green"]'), //Get our special input, "green"
    $notGreen = $('.button').not($green); //Get all other inputs

$('.form-group').on('change', '.button', function() { //Attach handler at parent and delegate to .button class
		if (!$(this).is(':checked')) { return; } //Only want to act when something is being checked
    
		if ($green.is(':checked')) {
    		//If green is checked, want to uncheck everything else
    		$notGreen.prop('checked', false); //.prop is the best way to uncheck
    }
    else if ($notGreen.filter(':checked').length === $notGreen.length) {
    		//If every other input other than green is checked, check green and uncheck everything else
    		$notGreen.prop('checked', false);
    		$green.prop('checked', true);
    }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="form-group">
    <label for="blue">Blue
        <input name="blue" class="button" type="checkbox" data-toggle="toggle" data-on="No" data-off="Yes" data-onstyle="default" data-offstyle="success">
    </label>
</div>   
<div class="form-group">
    <label for="yellow">Yellow
        <input name="yellow" class="button" type="checkbox" data-toggle="toggle" data-on="No" data-off="Yes" data-onstyle="default" data-offstyle="success">
    </label>
</div>
<div class="form-group">
    <label for="green">Green
        <input name="green" class="button" type="checkbox" data-toggle="toggle" data-on="No" data-off="Yes" data-onstyle="default" data-offstyle="success">
    </label>
</div>

Upvotes: 2

Shakir Ahamed
Shakir Ahamed

Reputation: 1308

You can do like this also,

$(document).ready(function () {
    $("input[type='checkbox']").change(function (event) {
        if($("input[type='checkbox'][name='blue']").is(':checked') && $("input[type='checkbox'][name='yellow']").is(':checked'))
          {
            $("input[type='checkbox'][name='green']").prop('checked', true);
            $("input[type='checkbox'][name='yellow']").prop('checked', false);
            $("input[type='checkbox'][name='blue']").prop('checked', false);
            
          }
        else if($("input[type='checkbox'][name='green']").is(':checked'))
          {
            $("input[type='checkbox'][name='blue']").prop('checked', false);
            $("input[type='checkbox'][name='yellow']").prop('checked', false);
          }
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">
    <label for="blue">Blue
        <input name="blue" class="button" type="checkbox" data-toggle="toggle" data-on="No" data-off="Yes" data-onstyle="default" data-offstyle="success">
    </label>
</div>   
<div class="form-group">
    <label for="yellow">Yellow
        <input name="yellow" class="button" type="checkbox" data-toggle="toggle" data-on="No" data-off="Yes" data-onstyle="default" data-offstyle="success">
    </label>
</div>
<div class="form-group">
    <label for="green">Green
        <input name="green" class="button" type="checkbox" data-toggle="toggle" data-on="No" data-off="Yes" data-onstyle="default" data-offstyle="success">
    </label>
</div>

Upvotes: 1

Mohit Tanwani
Mohit Tanwani

Reputation: 6638

Try following snippet.

$(document).ready(function () {
    $("input[type='checkbox']").change(function (event) {
        if($("input[type='checkbox'][name='blue']").is(':checked') && $("input[type='checkbox'][name='yellow']").is(':checked'))
          {
            $("input[type='checkbox'][name='green']").prop('checked', true);
          }
        else
          {
            $("input[type='checkbox'][name='green']").prop('checked', false);
          }
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">
    <label for="blue">Blue
        <input name="blue" class="button" type="checkbox" data-toggle="toggle" data-on="No" data-off="Yes" data-onstyle="default" data-offstyle="success">
    </label>
</div>   
<div class="form-group">
    <label for="yellow">Yellow
        <input name="yellow" class="button" type="checkbox" data-toggle="toggle" data-on="No" data-off="Yes" data-onstyle="default" data-offstyle="success">
    </label>
</div>
<div class="form-group">
    <label for="green">Green
        <input name="green" class="button" type="checkbox" data-toggle="toggle" data-on="No" data-off="Yes" data-onstyle="default" data-offstyle="success">
    </label>
</div>

Upvotes: 1

Related Questions