I am using Angular to validate a checkbox and using ng-model for that:
<input type="checkbox" name="news1" value="news1" ng-model="news" <c:if test="${xxxx == yes'}">checked="checked"></c:if>>
<label ng-click="news1();"></label>
When the page where the checkbox is being embedded is called via a link which passes the status of the news1 (yes).. I mean if the user is laready registered for news1 or not. If it's so, the checkbox should be checked dynamically otherwise it's unchecked.
The problem is that when I use/add: ng-model="news1" as attribute in the checkbox, it doesn't work correctly. The checkbox is checked for seconds and it become unchecked suddenly.
In the controller I'm having the following function to change the status of the checkbox after the page has been loaded, so that the user can check and/or uncheck the checkbox:
$scope.news1 = function (){
if(!$scope.news1){
$scope.news1 = !$scope.news1;
} else{
$scope.news1 = !$scope.news1;
}
};
The question, how can fix this so that the Checkbox keeps being checked when the status for news1 in the link is: yes.
How can I prevent angular from setting the checkbox to unchecked automatically?
Thanks!
I found the solution.. it's ng-init="xxxxx=true":
<input type="checkbox" name="news1" value="news1" ng-model="news" <c:if test="${xxxx == yes'}"> ng-init="news=true"></c:if>>
Thanks!
Related
I have jquery code that has the ability to set all checkboxes to 'checked' state on the click of a 'check all' checkbox. However, I would like to initially, start a html page by already having all checkboxes checked without having to click on that 'check all' checkbox. Please bear in mind, though, that I would like to keep the 'check all' checkbox since it has the ability to uncheck all checkboxes as well.
Here's my jquery code :
$('.chk_boxes').click(function(){
var chk = $(this).attr('checked')?true:false;
$('.chk_boxes1').attr('checked',chk);
});
If you want to have all your checkboxes checked the moment the page is loaded without the need to click anything, use:
$(document).ready(function(){
$("input:checkbox").prop("checked", "true");
});
Or just generate your HTML input tag like so:
<input type="checkbox" checked="checked" />
Hope this helps!
You could place your checkAll function outside of your click function, call it once the page load and when you click on the check all button
$(document).ready(function(){
checkAll(true);
$('.chk_boxes').click(function(){
var chk = $(this).attr('checked')?true:false;
checkAll(chk)
});
function checkAll(isCheck){
$('.chk_boxes1').attr('checked',isCheck);
}
})
I also like #Univ approach.
Change your original function to:
$('.chk_boxes').click(chkAll());
Create a new function:
function chkAll(){
var chk = $(this).attr('checked')?true:false;
$('.chk_boxes1').attr('checked',chk);
}
Call the new function when document are ready:
$(document).ready(function(){
chkAll();
})
I would just use html attributes
<input name="name" id="id" type="checkbox" checked="checked">
I wouldn't recommend using javascript to set these initial values because it will unnecessarily waste resources in the client machines.
I have a repeater:
<tr data-ng-repeat="worktime in workTimesFiltered ">
Inside the repeater I have an input checkbox:
<input ng-change="updateIncludeOnInvoice(worktime.includeOnInvoice, worktime.timeType)" name='obj1_data' type="checkbox" ng-model="worktime.includeOnInvoice" ng-true-value="true" ng-false-value="false">
When it's checked I call updateIncludeOnInvoice. The problem is that I don't want it to be clickable if another worktime.timeType == "0%".
I can capture this in updateIncludeOnInvoice and have tried setting worktime.includeOnInvoice = false, but the checkbox remains on screen.
I have found a way to get access to the dom element that was clicked to manually set it back to unchecked, but it seems hacky....
What's the correct way of dealing with this?
Validate checkbox somehow before calling ng-change, if so how?
If I understand this you just want to disable the checkbox when some condition is met.
<input ng-disabled="isConditionMet()">
$scope.isConditionMet = function() {
// check your condition and return true/false
};
I need to get the value of the checkboxes when checked and unchecked and save it in database. The value is 1 if checked and 0 if unchecked, respectively. I am currently using the snippet below and it show the result i want when i alert it. But the problem comes when saving in the database. It still gets the value I have set in my checkbox E.G: value='1'.
Here is my jQuery code:
$(document).ready(function() {
$('input[type="checkbox"]').click(function() {
var val = this.type == "checkbox" ? +this.checked : this.value ;
});
});
Here is my HTML checkbox:
<input type="checkbox" value="1" name="one_by_one" id="one_by_one" class="one_by_one">One
Probably you want this:
$('input[type="checkbox"]').click(function () {
$(this).prop("checked") ? $(this).val("1") : $(this).val("0")
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" value="1" name="one_by_one" id="one_by_one" class="one_by_one">One
The value of a checkbox never changes (by itself). If the checkbox is not checked its value simply won't be sent to the server. So at the server side you should check whether one_by_one is included in the request and set the value accordingly (e.g. set 0 if it doesn't exist or the value of one_by_one if it does).
I'm generating an HTML input with checked="false", however the checkbox is showing up checked.
I did the following in the javascript console and can't quite figure out whats going on. The resulting HTML after using .prop() to set the value to false looks the same except now the checkbox is not checked on the form.
> $(':input[checked]').prop('checked');
< true
> $(':input[checked]')
< [
<input type="checkbox" class="caseVal" checked="false">
]
> $(':input[checked]').prop('checked',false);
< [
<input type="checkbox" class="caseVal" checked="false">
]
I'm under the impression that I should just be setting checked="checked" OR not including the checked property at all if its false is that best practice? Either way I'd like to know what's going on in the above code.
Don't put checked="false"
You only put checked="checked" for valid XHTML, otherwise you'd do
<input type="checkbox" checked>
The browser doesn't care what value is assigned to checked attribute, as soon as it sees checked in the checkbox input tag, it's flagged as checked.
$(document).ready(function () { $(e).prop("checked", false);}
// "e" refers to button element
How to Uncheck in this case, example my code is: (see below)
if(previousHighlightedCheckbox!=null) {
console.log(sent.id, previousHighlightedCheckbox); // current checkbox and previous check box values are different.
document.getElementById(previousHighlightedCheckbox).checked = false; // still this does not uncheck previous one
}
How to set unchecked checkbox 1 When checkbox 2 was checked and set unchecked checkbox 2 When checkbox 1 was checked
( Make checkbox working like radio button. )
<input type="checkbox" id="checkbox1" name="checkbox1" value="checkbox1"/> checkbox 1
<br>
<input type="checkbox" id="checkbox2" name="checkbox2" value="checkbox2"/> checkbox2
<script type="text/javascript">
document.getElementById('checkbox1').onchange = function() {
document.getElementById('checkbox2').Unchecked = this.checked;
};
</script>
<script type="text/javascript">
document.getElementById('checkbox2').onchange = function() {
document.getElementById('checkbox1').Unchecked = this.checked;
};
</script>
You need to use .checked and not unchecked and set its property to false
document.getElementById('checkbox2').checked = false;
FIDDLE
With jQuery -
$('input:checkbox').on('change',function(){
if(this.checked)
$(this).siblings('input:checkbox').prop('checked',false);
});
Demo ---> http://jsfiddle.net/3g67r/
Your best option is to use the right input type for the job.
Check boxes allow multiple selections while radio buttons do not. Users should expect them to work like that and would get confused if check boxes worked like radio buttons (I know I would get confused.)
Use the right input and forget about overriding functionality with javascript. (Don't forget, they could have javascript turned off which would potentially cause you problems that using the right input would prevent)