CODEWITHSUNDEEP
javascriptjquery
Tom Rudge
Tom Rudge

Reputation: 3272

When two checkboxes are checked a third should be checked by default

Please see http://jsfiddle.net/otg0kmru/1/

I cant get my fiddle to work... I know there are easier ways to do this but these are my restraints. There could be more checkboxes than two(unlimited) but the read only checkbox must only be checked when all others are checked.

<div class="shown">
  <input type="checkbox" value="TRUE" onclick="Signoffs();" id="EngineeringApproval" name="EngineeringApproval">
</div>

<div class="shown">
  <input type="checkbox" value="TRUE" onclick="Signoffs();" id="ElectricalApproval" name="ElectricalApproval">
</div>

<h3>
    Final signoff (should be ticked when both of the above are ticked)
    </h3>
<input type="checkbox" value="TRUE" id="AllSignedOff" name="AllSignedOff">

and JQuery

$(function() {
  Signoffs();
});

function Signoffs() {

  var notSHOWN = $('.shown').find('input').is(':checked').length > 0;

  if (notSHOWN) {
    $('#AllSignedOff').attr('checked');
  }
};

Upvotes: 0

Views: 261

Answers (5)

Rory McCrossan
Rory McCrossan

Reputation: 337580

To meet your requirements you need to run your code when a checkbox is checked as well as on load of the page. To do that you can use the change event. I'd also suggest using unobtrusive Javascript code to attach your event handlers over the outdated on* event attributes. Try this:

$(function() {
  $('.shown input').on('change', Signoffs);
  Signoffs();
});

function Signoffs() {
  var allChecked = $('.shown input').length > 0 && $('.shown input:checked').length == $('.shown input').length;
  $('#AllSignedOff').prop('checked', allChecked);
};
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="shown">
  <input type="checkbox" value="TRUE" id="EngineeringApproval" name="EngineeringApproval">
</div>

<div class="shown">
  <input type="checkbox" value="TRUE" id="ElectricalApproval" name="ElectricalApproval">
</div>

<h3>Final signoff below (should be ticked and be read only when both of the above are ticked)</h3>
<input type="checkbox" disabled="disabled" value="TRUE" id="AllSignedOff" name="AllSignedOff">

Note that your fiddle was using a very old version of jQuery (1.5.2). I'd strongly suggest you upgrade that to at least 1.11, as in the above example.

Upvotes: 3

Rahul Patel
Rahul Patel

Reputation: 5246

To make the disable checked on all the other checkbox checked you should have to count total checkboxes and checked checkboxes and compare both and based on that check/uncheck disabled checkbox.

Please check below working snippet.

http://jsfiddle.net/otg0kmru/8/

$("input[type='checkbox']").on("change",function(){
  if($("input[type='checkbox']:not(#AllSignedOff)").length == $("input[type='checkbox']:checked:not(#AllSignedOff)").length){
    $("#AllSignedOff").prop('checked', true);
  }else{
    $("#AllSignedOff").prop('checked', false);
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="shown">
<input type="checkbox" value="TRUE" id="EngineeringApproval" name="EngineeringApproval">
</div>

<div class="shown">
<input type="checkbox" value="TRUE" id="ElectricalApproval" name="ElectricalApproval">
</div>

<h3>
Final signoff below (should be ticked and be read only when both of the above are ticked)
</h3>
<input type="checkbox" disabled="disabled" value="TRUE" id="AllSignedOff" name="AllSignedOff">

Upvotes: 0

Magicprog.fr
Magicprog.fr

Reputation: 4100

You should add the event using JS instead of HTML aattribute, and use live because of the old JQuery version you're using:

$(function() {
  Signoffs();
});

function Signoffs() {
  $('#AllSignedOff').attr('checked', $('.shown input:checked').length === $('.shown input').length);
}

$(".shown input").live("change", function() {
  Signoffs();
});
<div class="shown">
  <input type="checkbox" value="TRUE" id="EngineeringApproval" name="EngineeringApproval">
</div>

<div class="shown">
  <input type="checkbox" value="TRUE" id="ElectricalApproval" name="ElectricalApproval">
</div>

<h3>
Final signoff below (should be ticked and be read only when both of the above are ticked)
</h3>
<input type="checkbox" disabled="disabled" value="TRUE" id="AllSignedOff" name="AllSignedOff">

Upvotes: 0

antesoles
antesoles

Reputation: 683

You could do something like this. It's not the shortest solution, but I think comprehensive:

$('input[type="checkbox"]:not([disabled])').click(function() {
    var checkboxes_cnt = $('input[type="checkbox"]:not([disabled])').length;
  var checkboxes_cnt_checked = $('input[type="checkbox"]:not([disabled]):checked').length;

  if (checkboxes_cnt === checkboxes_cnt_checked ) {
    $('#AllSignedOff').attr('checked', true);
  } else {
    $('#AllSignedOff').attr('checked', false);
  }
});

Here your modified Fiddle: http://jsfiddle.net/otg0kmru/5/

Upvotes: 1

kapantzak
kapantzak

Reputation: 11750

Check if there is any uncheked inputs on every click:

$(document).on('change', '.clickable', function() {
  $('#finalInput').prop('checked', allClickablesChecked());
});

function allClickablesChecked() {
  var unchecked = 0;
  $('.clickable').each(function() {
    if (!$(this).is(':checked')) {
      unchecked++;
    }
  });
  return unchecked === 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>
  <span>One: </span>
  <input type="checkbox" class="clickable" />
</label>
<br />
<label>
  <span>One: </span>
  <input type="checkbox" class="clickable" />
</label>
<br />
<label>
  <span>Final: </span>
  <input id="finalInput" type="checkbox" disabled />
</label>

Upvotes: 0

Related Questions