Develop Reference

active button after check one or more checkbox in Angularjs

I have some checkbox, and a button. Now, I want active button when one or more checkbox is checked. How can I do this in angularjs?
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<label><input type="checkbox" name="check"> First</label>
<label><input type="checkbox" name="check"> Second</label>
<label><input type="checkbox" name="check"> Third</label>
<br>
<button type="button" disabled ng-model="$scope.btn">active/deactive</button>

Set ng-model to checkboxes
<label><input type="checkbox" name="check" ng-model="check1"> First</label>
<label><input type="checkbox" name="check" ng-model="check2"> Second</label>
<label><input type="checkbox" name="check" ng-model="check3"> Third</label>
And use ng-disabled to disable\enable button
<button type="button" ng-disabled="!check1 && !check2 && !check3" ng-model="$scope.btn">active/deactive</button>

You can use the ng-disabled directive on the button to add the disable attribute conditionally.
Check the below example where the input check boxes are bound to their respective properties on the controller's scope using the ng-model directive that serves two-way data binding in AngularJS.
Note: If you're having a complex condition to be checked in the view you can write a function and invoke it in the view using a corresponding directive in that situation.
angular
.module('demo', [])
.controller('DefaultController', DefaultController);
function DefaultController() {
var vm = this;
vm.disableButton = disableButton;
function disableButton() {
if (vm.first || vm.second || vm.third) {
return false;
} else {
return true;
}
}
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js"></script>
<div ng-app="demo">
<div ng-controller="DefaultController as ctrl">
<label><input type="checkbox" name="check" ng-model="ctrl.first"> First</label>
<label><input type="checkbox" name="check" ng-model="ctrl.second"> Second</label>
<label><input type="checkbox" name="check" ng-model="ctrl.third"> Third</label>
<br>
<button type="button" ng-disabled="ctrl.disableButton()">active/deactive</button>
</div>
</div>

save the values of the checkboxes with ng-model and use them in ng-disabled="!(checkboxValue1 || ch...)"
use ng-model for saving the values and ng-requried="!checkBox2Value && !checkbox3Value" with the checkboxes. Put a form around the checkboxes and use ng-disabled="formName.$invalid"

Validating if atleast one checkbox is checked or one input field is filled

I need better validation logic, where some Checkboxes and some input fields are grouped together.
The user either have to check at least one checkbox or have to fill at least one input box.
If a checkbox is checked or an input field is filled then the complete group is validated.
What will be the best possible way to validate such a situation?
e.g
<input class="checkbox" type="checkbox" name="check-deal" value="1" grouped="deal" >
<input class="checkbox" type="checkbox" name="check-deal" value="2" grouped="deal">
<input class="checkbox" type="checkbox" name="check-deal" value="3" grouped="deal">
<input class="checkbox" type="checkbox" name="check-deal" value="4" grouped="deal">
<input class="input-group" type="text" name="deal-name1" value="" grouped="deal">
<input class="input-group" type="text" name="deal-name2" value="" grouped="deal">
I have defined an extra attribute grouped for all input and checkboxes that should be grouped togather
but getting no idea how to validate the group as best practice.

DEMO
Point No.1 : There isn't any attribute called grouped for html as of my knowledge but I would suggest you to use data-* prefixed attribute names like data-grouped or data-anyname which is valid
Point No.2 : I rather categorized your checkboxes and textboxes into separate divs and below is how it is:
<div class="chkbox">
<input class="checkbox" type="checkbox" name="check-deal" value="1" />
<input class="checkbox" type="checkbox" name="check-deal" value="2" />
<input class="checkbox" type="checkbox" name="check-deal" value="3" />
<input class="checkbox" type="checkbox" name="check-deal" value="4" />
</div>
<div class="txtbxs">
<input class="input-group" type="text" name="deal-name1" value="" />
<input class="input-group" type="text" name="deal-name2" value="" />
</div>
<button class="btnValidate">Validate</button>
Point No.3 : Below is how you can validate using jquery
$('.btnValidate').on('click',function(){
var chkLength=$('.chkbox .checkbox:checked').length; //get checkbox checked length
var filledText=$(".txtbxs .input-group").val()!="";
//get bool value whether any of the text box is filled or not
if(chkLength || filledText) //check with or condition
alert('valid')
else
alert('invalid');
});
UPDATE
DEMO
As #AkshatG pointed in his answer the discrepancy was there in my answer so I've edited it and here is the updated solution.
$('.btnValidate').on('click',function(){
var chkLength=$('.chkbox .checkbox:checked').length;
var filledText=false; //First set it to false
$.each($(".txtbxs .input-group"),function(index,value){
if($(value).val()!="")
{
filledText=true//if it finds any value then set it to true
return;//break from $.each
}
})
if(chkLength || filledText)
alert('valid')
else
alert('invalid');
});

You first need to take count of each validations. And then check if any of the two has count greater than 0 or not. Guruprasad's answer won't work if you enter text on second textbox because it won't filter all the textboxes. You have to use filter function for this :
$("input[type='text'],textarea").filter(function() {
return $(this).val() != "";
}).length;
Here's a jsfiddle :
http://jsfiddle.net/myfLgpdv/
Hope this helps.

Show Hide Check boxes depending on another check boxes

I am totally new to web development so please do not leave any negative marks for this question. If you do not like this question please leave it as for another one who wish to answer.
There are 2 check box groups 'main' & 'sub.
if user select 'Main_CheckBox_1' from 'main' need to show 'Sub_Checkbox_1_Main_1' and 'Sub_Checkbox_2_Main_1' from 'sub'
and also if user select 'Main_CheckBox_2' need to show 'Sub_Checkbox_1_Main_2' & 'Sub_Checkbox_2_Main_2'
<div id = "mainDiv" >
<input type="checkbox" name="main" value="main_1"><span>Main_CheckBox_1</span> <br/>
<input type="checkbox" name="main" value="main_1"><span>Main_CheckBox_2</span><br/>
<input type="checkbox" name="main" value="main_1"><span>Main_CheckBox_2</span><br/>
</div>
<div id = "subDiv" >
<input type="checkbox" name="sub" value="Sub_1_of_main_1"><span>Sub_Checkbox_1_Main_1</span> <br/>
<input type="checkbox" name="sub" value="Sub_2_of_main_1"><span>Sub_Checkbox_2_Main_1</span><br/>
<input type="checkbox" name="sub" value="Sub_1_of_main_2"><span>Sub_Checkbox_1_Main_2</span><br/>
<input type="checkbox" name="sub" value="Sub_2_of_main_2"><span>Sub_Checkbox_2_Main_2</span><br/>
<input type="checkbox" name="sub" value="Sub_1_of_main_3"><span>Sub_Checkbox_1_Main_3</span><br/>
<input type="checkbox" name="sub" value="Sub_2_of_main_3"><span>Sub_Checkbox_2_Main_3</span><br/>
</div>
1. how to identify which check box is selected from 'main' ?
2. how to show/hide check boxes in 'sub' depending on 'main' check boxes ?
Thanks you

1) Give all inputs with name main input[name='main'] the trigger to act on change. Then this.value will tell you which one in particular was changed.
2) Make a function that takes this.valueas parameter and then toggle (hide/show) the two corresponding checkboxes and the next element ()
$(document).ready(function() {
$("input[name='main']").change(function() {
showHide(this.value);
});
});
function showHide (chkbx) {
var k = "input[value='Sub_1_of_"+chkbx+"']";
$(k).toggle(0);
$(k).next().toggle(0);
var k = "input[value='Sub_2_of_"+chkbx+"']";
$(k).toggle(0);
$(k).next().toggle(0);
}

It'd be easier if you'd grouped your sub checkboxes like below. Use CSS to hide all groups during load. This would produce a lot more cleaner and readable DOM/code.
$(function() {
var $groups = $("#subDiv .group");
$('#mainDiv :checkbox').on("change", function() {
var index = parseInt($(this).val().slice(-1), 10) - 1;
$groups.eq(index).toggle(this.checked).siblings().hide();
});
});
#subDiv .group {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id = "mainDiv" >
<input type="checkbox" name="main" value="main_1" /><span>Main_CheckBox_1</span> <br/>
<input type="checkbox" name="main" value="main_2" /><span>Main_CheckBox_2</span><br/>
<input type="checkbox" name="main" value="main_3" /><span>Main_CheckBox_3</span><br/>
</div>
<div id = "subDiv" >
<div class="group">
<input type="checkbox" name="sub" value="Sub_1_of_main_1" /><span>Sub_Checkbox_1_Main_1</span> <br/>
<input type="checkbox" name="sub" value="Sub_2_of_main_1" /><span>Sub_Checkbox_2_Main_1</span><br/>
</div>
<div class="group">
<input type="checkbox" name="sub" value="Sub_1_of_main_2" /><span>Sub_Checkbox_1_Main_2</span><br/>
<input type="checkbox" name="sub" value="Sub_2_of_main_2" /><span>Sub_Checkbox_2_Main_2</span><br/>
</div>
<div class="group">
<input type="checkbox" name="sub" value="Sub_1_of_main_3" /><span>Sub_Checkbox_1_Main_3</span><br/>
<input type="checkbox" name="sub" value="Sub_2_of_main_3" /><span>Sub_Checkbox_2_Main_3</span><br/>
</div>
</div>

Select all the checkboxes inside the same loop iteration using AngularJS

What I'm trying to achieve is to check some checkboxes belonging to a ng-repeat loop iteration when I check a "master" checkbox. My code so far in the view:
<div ng-app="CheckAllModule">
<div ng-controller="checkboxController">
<ul ng-repeat="s in struct">
<li><strong>{{s}} item</strong>
<input type="checkbox" ng-checked="x1 && x2 && x3" ng-model="selectedAll" ng-click="checkAll()" />
</li>
<label>Subitem A
<input type="checkbox" ng-checked="chk" ng-model="x1" />
</label>
<label>Subitem B
<input type="checkbox" ng-checked="chk" ng-model="x2" />
</label>
<label>Subitem C
<input type="checkbox" ng-checked="chk" ng-model="x3" />
</label>
</ul>
</div>
</div>
Where the first checkbox is the "master" and should impose its own state to the "slaves" (the next three checkboxes), no matter what was their previous state.
Regarding to the slave checkboxes, they should be checked & unchecked indepently. But If the three are checked at the same time, the master should be too. Whenever only one of them is not checked, the master shouldn't be as well.
And my controller:
var app = angular.module("CheckAllModule", []);
app.controller("checkboxController", function ($scope) {
$scope.struct = ['First', 'Second'];
$scope.checkAll = function () {
if ($scope.selectedAll) {
$scope.chk = true;
} else {
$scope.chk = false;
}
};
});

This almost certainly doesn't follow best practices but I'm a noob with Angular. It does work though:
http://plnkr.co/edit/oGNC3ZUZHDHrBrMyRKjW?p=preview
var app = angular.module("CheckAllModule", []);
app.controller("checkboxController", function($scope) {
$scope.struct = ['First', 'Second'];
$scope.checkAll = function(selected, chkArray) {
for (var chk in chkArray) {
chkArray[chk] = selected
}
};
});
I made some adjustments to your html to get this working:
<div ng-app="CheckAllModule">
<div ng-controller="checkboxController">
<ul ng-repeat="s in struct" data-ng-init="x[1]=false;x[2]=false;x[3]=false">
<li>
<strong>{{s}} item</strong>
<input type="checkbox" ng-checked="x[1] && x[2] && x[3]" ng-model="selectedAll" ng-click="checkAll(selectedAll, x)" />
</li>
<label>Subitem A
<input type="checkbox" ng-model="x[1]" />
</label>
<label>Subitem B
<input type="checkbox" ng-model="x[2]" />
</label>
<label>Subitem C
<input type="checkbox" ng-model="x[3]" />
</label>
</ul>
</div>
</div>
Update
I was thinking about how better to test x1 && x2 && x3 the conversion to an array was the first step but then you can do:
x.indexOf(false)
(Ideally you would use .reduce(function(a,b) { return a && b; }) but reduce is not yet well enough supported and to be fair, it's a bit more clunky) - strangely this is not working yet.

Working Plunkr Here
As a note, you should always try to bind to something using dot notation.
<ul ng-repeat="s in struct track by $index">
<li>
<strong>{{s.Item}} item</strong>
<input type="checkbox" ng-click="checkAll(s.selectedAll,$index)" ng-model="s.selectedAll" ng-checked="s.x1 && s.x2 && s.x3" />
</li>
<label>Subitem A
<input type="checkbox" ng-checked="s.chk" ng-model="s.x1" />
</label>
<label>Subitem B
<input type="checkbox" ng-checked="s.chk" ng-model="s.x2" />
</label>
<label>Subitem C
<input type="checkbox" ng-checked="s.chk" ng-model="s.x3" />
</label>
</ul>
The situation you have here is that you ng-repeat is bound to a list of strings. You should know that when repeating on a collection each item then would have it's own scope and maintain their values independently. This is hard to do since you can not add these values to a string (you need to bind to an object that can be expanded on).
I have made the adjustments that would allow for this particular setup. It should be agreeable as minor changes have been made.

Showing, hiding checkboxes with jquery using fadeIn fadeOut

I am writing a form, it has checkboxes, and I wrote a script to show and hide them (specifically hide all other checkboxes when one of them is selected).
I reached this far when I need this to hide the input checkboxes, but what this code below is doing, is: it shows only 1 of checkboxes (the second one). Why, how can I hide both of the checkboxes at the same time ?
$('input:checkbox.individual' && 'input:checkbox.organization').stop(true,true).fadeIn("normal")
this is my html:
<div class="field check check-entity">
<label for="entity_type">For what kind of entity are you requesting sponsorship?<span class="form_required">*</span></label><br><br>
<input type="checkbox" name="entity_type" value="entity_project" class="project"/><label for="entity_project" class="lalbe_project">Project</label>
<input type="checkbox" name="entity_type" value="entity_individual" class="individual"/><label for="entity_individual"class="label_individual">Individual</label>
<input type="checkbox" name="entity_type" value="entity_organization" class="organization"/><label for="entity_organization" class="label_organization">Organisation</label>
</div>

Use a , in the selection string to select multiple groups of elements
$('input.individual:checkbox, input.organization:checkbox')
// ^ see here

Is this the effect you wanted to achieve?
http://jsfiddle.net/z37br/
HTML:
<div class="field check check-entity">
<label for="entity_type">For what kind of entity are you requesting sponsorship?
<span class="form_required">*</span>
</label>
<br><br>
<input type="checkbox" name="entity_type" value="entity_project" data-type="project"/>
<label for="entity_project" class="lalbe_project">Project</label>
<input type="checkbox" name="entity_type" value="entity_individual" data-type="individual"/>
<label for="entity_individual"class="label_individual">Individual</label>
<input type="checkbox" name="entity_type" value="entity_organization" data-type="organization"/>
<label for="entity_organization" class="label_organization">Organisation</label>
</div>
JS:
$('input').change(function() {
if ($(this).prop('checked')) {
var clickedCheckboxType = $(this).attr('data-type');
$('input').each(function() {
if (clickedCheckboxType != $(this).attr('data-type')) {
$(this).fadeOut('fast');
$(this).next().fadeOut('fast');
}
});
}
else {
$('input').fadeIn('fast');
$('input').next().fadeIn('fast');
}
});