How do you make a parent div click propagate to its child checkbox in AngularJS? The Checkbox will have the hidden attribute, so we need to allow the parent div be the clickable entity.
HTML:
<body ng-app="checkboxApp">
<div ng-controller="MainController">
<h1>Hello Plunker!</h1>
<form name="myForm">
Value1:<input type="checkbox" ng-model="value1" /><br />
Value2:<input type="checkbox" value="value-2" ng-model="value2" ng-true-value="YES" ng-false-value="NO" /><br />
<tt>value1 = {{value1}}</tt><br />
<tt>value2 = {{value2}}</tt><br />
<hr />
<div class="btn btn-primary">
Value1 (hidden):<input type="checkbox" ng-model="value1" hidden/><br />
</div>
<div class="btn btn-primary" >
Value2:<input type="checkbox" ng-model="value2" ng-true-value="YES" ng-false-value="NO" /><br />
</div>
</form>
</div>
</body>
JS:
angular.module('checkboxApp', []);
angular.module('checkboxApp')
.controller('MainController', [ '$scope', function MainController($scope){
$scope.value1 = true;
$scope.value2 = 'YES'
}]);
Plnkr: here
I have tried a click function() as well on the ng-change, but I still can't get it working.
All you need to do is add an ng-click onto the parent div like this. This example would work if you did not use ng-true-value and ng-false-value.
<div class="btn btn-primary" ng-click="value1 = !value1>
Value1 (hidden):<input type="checkbox" ng-model="value1" hidden/><br />
</div>
<div class="btn btn-primary" ng-click="value2 = !value2>
Value2:<input type="checkbox" ng-model="value2"/><br />
</div>
Otherwise just use a function: ng-click="toggle(value2)"
$scope.toggle = function(val) {
if (val === "YES") {
val = "NO";
} else {
val = "YES";
}
}
Here is a Plunker
Related
I am having some trouble with my checkboxes. I am trying to get a returned true or false value out of event listeners on checkboxes and then passing it through an event listener on a button to confirm that at least one checkbox is selected. I'm sorry if this sounds confusing and I feel like there is an easier way to do this. I would like to solve this with pure JavaScript. Really appreciate the help. Below is the code.
<body>
<script src="racquetObjects.js"></script>
<div class="mainContainer">
<div class="selectors">
<form action="">
<div class="checkboxes">
<input type="checkbox" id="babolat" value="Babolat" />
<label for="babolat">Babolat</label>
<input type="checkbox" id="wilson" value="Wilson" />
<label for="wilson">Wilson</label>
<input type="checkbox" id="power" value="Power" />
<label for="power">Power</label>
<input type="checkbox" id="control" value="Control" />
<label for="control">Control</label>
<input type="checkbox" id="popular" value="Popular" />
<label for="popular">Popular</label>
</div>
<button type="button" id="find">Find</button>
</form>
</div>
<div class="racquetContainer"></div>
<div class="bench"></div>
</div>
<script src="racquetFinderCB.js"></script>
<script src="racquetFinder.js"></script>
</body>
const findButton = document.querySelector("#find");
const checkboxes = document.querySelectorAll(
".checkboxes input[type=checkbox]"
);
const checkboxesAreChecked = checkboxes.forEach((el) => {
el.addEventListener("click", (e) => {
if (e.target.checked) {
return true;
} else {
return false;
}
});
});
const beforeSubmit = () => {
if (checkboxesAreChecked === true) {
console.log("Time to search!");
} else {`enter code here`
console.log("You need to select an option");
}
};
In this example there is an event listener for the form submit. An array of the input elements is filtered, so only the checked will end up in checked.
The first e.preventDefault() is just for testing. If the form should submit (something was checked) then remove that line of code.
document.forms.find.addEventListener('submit', e => {
let inputs = e.target.querySelectorAll('input');
e.preventDefault(); // prevent default to test what happens
let checked = [...inputs].filter(input => input.checked);
if (checked.length > 0) {
console.log('at least one was checked');
} else {
e.preventDefault(); // prevent default to stop the form action
console.log('none was checked');
}
});
<div class="mainContainer">
<div class="selectors">
<form name="find" action="">
<div class="checkboxes">
<input type="checkbox" id="babolat" value="Babolat" />
<label for="babolat">Babolat</label>
<input type="checkbox" id="wilson" value="Wilson" />
<label for="wilson">Wilson</label>
<input type="checkbox" id="power" value="Power" />
<label for="power">Power</label>
<input type="checkbox" id="control" value="Control" />
<label for="control">Control</label>
<input type="checkbox" id="popular" value="Popular" />
<label for="popular">Popular</label>
</div>
<button id="find">Find</button>
</form>
</div>
<div class="racquetContainer"></div>
<div class="bench"></div>
</div>
I have a button that I need to disable if the there is no checked checkbox on my ng-repeat.
<button class="" data-toggle="modal" data-target="#rejectModal" contenteditable="false" id="delbutton" ng-model="delbutton" ng-disabled="!item.checked">
and my checkbox is like this
<input type="checkbox" name="select" value="checked" ng-model="item.checked"/>
How can I possibly do this?
Here is the plunker for your problem. [https://plnkr.co/edit/AIrKVLedt6mcggvpmJE2?p=preview][1]
Controller:
app.controller('MainCtrl', function($scope) {
$scope.Items = [
{checked:false},
{checked:true},
{checked:false},
];
$scope.setButtonEnabled = function(itemchecked){
var isButtonEnabled =false;
angular.forEach( $scope.Items, function(item){
if(item && item.checked)
isButtonEnabled = true;
});
return isButtonEnabled;
};
});
Html:
<div ng-repeat="item in Items">
<input type="checkbox" name="select" value="checked" ng-model="item.checked" ng-change="setButtonEnabled()" />
</div>
<br>
<button id="delbutton" ng-disabled="setButtonEnabled()">Submit</button>
I have a form where users have to answer questions through checkboxes. There are quite few checkboxes and I'm using AngularJS in the form to validate it. A basic validation is that all the required fields are filled.
Below is my example code:
<input type="checkbox" name="skills"> IT
<input type="checkbox" name="skills"> Design
<input type="checkbox" name="skills"> Photoshop
<input type="checkbox" name="skills"> Writing
Now I want the checkboxes to be required so from the "skills" checkboxes the user atleast checks 1 box.
I've tried putting the required tag but it didn't seem to work.
Im using AngularJS to validate my form like so
<button ng-disabled="myForm.$invalid">Submit</button>
Any idea how I can fix this? If you can working fiddle that would great.
If you want to validate using ng-disabled="myForm.$invalid"
var app = angular.module('myModule', []);
app.controller("myController", function ($scope) {
$scope.choices = [{"name":"IT"},{"name":"Design"},{"name":"Technology"}];
$scope.checkBoxArray = [];
$scope.validate = function (value) {
if ($scope.checkBoxArray.indexOf(value) == -1){
$scope.checkBoxArray.push(value);
}
else {
$scope.checkBoxArray.splice($scope.checkBoxArray.indexOf(value), 1);
}
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<html ng-app="myModule">
<body ng-controller="myController">
<ng-form name="myForm">
<span ng-repeat="choice in choices">
<input type="checkbox" name="skills" ng-required="checkBoxArray.length==0" ng-model="choice.checked" ng-change="validate(choice.name)">
{{choice.name}}
</span>
</ng-form>
<button ng-disabled="myForm.$invalid">Submit</button>
</body>
</html>
Try this working demo :
var myApp = angular.module('myApp',[]);
myApp.controller('MyCtrl',function($scope) {
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyCtrl">
<form name="checkBoxForm">
<input type="checkbox" name="skills" ng-model="IT">IT
<input type="checkbox" name="skills" ng-model="Design">Design
<input type="checkbox" name="skills" ng-model="Photoshop">Photoshop
<input type="checkbox" name="skills" ng-model="Writing">Writing
<button ng-disabled="!IT&&!Design&&!Photoshop&&!Writing">Submit</button>
</form>
</div>
You can use a array to do this:
var myApp = angular.module('myApp',[]);
myApp.controller('MyCtrl',function($scope) {
$scope.collection=[{
"Name": "IT"},
{
"Name": "Design"},
{
"Name": "Photoshop"},
{
"Name": "Writing"}];
$scope.disableButton = true;
$scope.doTheThings = function (item)
{
if (item.checked)
$scope.disableButton = true;
else
$scope.disableButton = false;
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyCtrl">
<ul>
<li ng-repeat="item in collection">
<input type="checkbox" name="skills" ng-model="item.checked" ng-click="doTheThings(item)"> {{item.Name}}
</li>
</ul>
<button ng-disabled="disableButton"> Submit </button>
</form>
</div>
I have a problem when I want to append a textarea linked to tinyMCE wysiwyg.
tinyMCE don't have time to initialize so maybe the solution is to wait the end of the ng-repeat. But I don't now how and tinyMCE is not using angular so..
Need your help.
Have a good time.
Take a Look at this
Working Demo
html
<div ng-app="myApp" ng-controller="PostController">
<br/>
<textarea ng-model="mypost" ui-tinymce="tinymceOptions"></textarea>
<br/>
<input type="button" value="Submit" ng-click="submit()"/>
<br/>
<ul>
<li ng-repeat="post in posts | orderBy:orderProp:true">
<input type="button" value="Edit" ng-click="edit=!edit;newpost=post.content"/>
<input ng-hide="edit" type="button" value="Delete" ng-click="deletepost(post)"/>
<br />
<div ng-hide="edit" style="white-space: pre-wrap"><ANY ng-bind-html-unsafe="post.content"></ANY></div>
<div ng-show="edit">
<textarea ng-model="newpost" ui-tinymce="tinymceOptions"></textarea>
<input type="button" value="Submit" ng-click="editpost(post, newpost);edit=!edit" />
</div>
<br /><br /><br/>
</li>
</ul>
</div>
script
var myApp = angular.module('myApp', ['ui.tinymce']);
function PostController($scope) {
$scope.posts = [];
$scope.time = 1;
$scope.orderProp = 'pseudo_time';
$scope.tinymceOptions = { menubar: false };
$scope.submit = function() {
newpost = {"content": $scope.mypost, "pseudo_time": $scope.time++};
$scope.posts.push(newpost);
};
$scope.editpost = function(post, newpost) {
var index = jQuery.inArray(post, $scope.posts);
$scope.posts[index].content = newpost;
};
$scope.deletepost = function(post) {
if (confirm("Delete Answer?") == true) {
var index = jQuery.inArray(post, $scope.posts);
$scope.posts.splice(index, 1);
}
};
}
I have a button Resend , and on click of it , the checkboxes get enable against the following:
id="AlertSent"
id="AlertNotSent"
id="AlertInProgress"
Now the DIV Code for Above mentioned DIVS is as below
<div class="span9">
<div class="row-fluid">
<div id="enableCheckBox" class ="span12">
<input type="checkbox" id="checkbox1" name="checkbox1"/>
</div>
<div id="AlertSent" class="span12">
<label><spring:message code='alert.sent' />:</label>
</div>
</div>
<div class="row-fluid">
<div id="enableCheckBox" class ="span12">
<input type="checkbox" id="checkbox2" name="checkbox2"/>
</div>
<div id="AlertNotSent" class="span12">
<label><spring:message code='alert.not.sent'/>:</label>
</div>
</div>
<div class="row-fluid">
<div id="enableCheckBox" class ="span12">
<input type="checkbox" id="checkbox3" name="checkbox3" class="required" />
</div>
<div id="AlertInProgress" class="span12">
<label> <spring:message code='alert.in.progress' />:</label>
</div>
</div>
</div>
The button Code for Resend and Done is
<input type="button" value="button" id="resend"/>
<input type="button" value="button" id="done"/>
The JQuery Code is
var j$ = jQuery.noConflict();
j$(document).ready(function() {
var resendbtn = j$('#resend');
var allChkBox = j$('input[name="enableCheckBox"]');
var verifyChecked = function() {
if ! $('#resend').click {
allChkBox.attr('disabled', 'disabled');
} else {
allChkBox.removeAttr('disabled');
}
};
verifyChecked();
resendbtn.change(verifyChecked);
});
The requirement is on click of Resend, the checkboxes appear against above DIVS (AlertSent, AlertNotSent and AlertInProgress), and the Resend button Becomes Done, and if a User unchecks all the checkboxes then the Done Button becomes Resend again.
How do I write a JQuery/JavaScript code to achieve above?
Please suggest
It's hard to know exactly what you want here, but perhaps this will get you started:
http://jsfiddle.net/ZqH7B/
to handle showing the checkboxes:
$("#resend").on( 'click', function () {
$('.enableCheckBox').css('visibility', 'inherit');
$(this).hide().next().show();
$('input:checkbox').prop('checked', true);
});
to handle uncheck behavior:
$('input[type=checkbox]').on( 'change', function() {
var num = $('input:checked').length;
if ( num == 0 ) { $('#resend').show().next().hide(); }
});
Try following code:
HTML:
<input type="checkbox" class="chk">
<input type="button" value="Resend" class="toggle">
JS:
$(document).ready(function(){
$(".chk").prop("checked","checked");
$(".chk").css('display','none');
$(".toggle").click(function(){
$(".chk").css('display','block');
$(".chk").prop("checked","checked");
$(this).val("Done");
});
$(".chk").change(function(){
var all = $(".chk").length;
var chked = $(".chk").not(":checked").length;
if(all == chked){
$(".chk").css('display','none');
$(".toggle").val("Resend");
}
})
});
JSFIDDLE DEMO