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
};
Related
I´m working with a list of element and filtering the list using pipes, the filter is multi-selection to filter using more than one value, i save the filter in the localstorage to have persistent in the filter after close the window or reload the page, in the mat-checkbox component i use i function in the [checked]="existInArray(color.id, filterColor)" directive to check the checkbox if the value is already in the filter array to check the checkbox, but i have a problem, if the checkbox is checked using the function, the next time i click the checkbox to uncheck it, the checkbox doesnt change the state of checked true to false, only when i clicked a second time change to checked false
Template
<mat-checkbox *ngFor="let color of filterService.getFilter(filterType.FILTER_COLOR).items.ToArray() | filterQuery:filterOptions.color"
[checked]="existInArray(color.id, filterColor)" class="filter-checkbox" [value]="color.id" [hidden]="color.id === '999999'"
(click)="filterBy(filterType.FILTER_COLOR, color.id, filterColor)">
<div class="assigned">
<div class="assigned-avatar text-center" [ngStyle]="{ 'background-color': color?.color?.bgColor }"></div>
<p class="assigned-name">{{ color.name }}</p>
</div>
</mat-checkbox>
Filter.ts
public existInArray(element, array: Array<string>): boolean {
return array.indexOf(element) > -1;
}
public filterBy(filterType: FilterTypeEnum, element: any, array: Array<string>) {
this.toggleInArray(element, array);
this.updateFilterObservable(filterType);
}
Example, as you can see in the image, the checkbox is already checked by default because i use the existInArray function to check if the value of the check already exist in the filter array, if i try uncheck it, the first time doesn´t work, but when i click a second time the checkbox is unchecked, any idea what could be....?
I think the reason is because the [checked] is trigger before i toggle the element from the array, but no idea so far idea how to solved.... any idea.
This is a timing issue of your [checked]="existInArray(color.id)" being out of sync with your click event.... [checked]="existInArray(color.id)" happens before your click. Subscribe to the change event instead.
(change)="toggleInArray(color.id)"
Top_Select: any[] = []; // selection clear when selected... in your ts file
//on the check_click event firing add this make sure you get the index (index_chkbx) in the event
this.Top_Select[index_chkbx] = true;
in you html
I have got chart in container and checkbox for dragging function, enable and disable works, but if i click for second time enable checkbox it doesn't work. I don't know where is mistake. Below is jiddle url and IF statement function Thanks for suggests
http://jsfiddle.net/dmmqwr6d/
function EnableDrag(checkboxvalue) {
if (checkboxvalue == true) {
$("#chartdiv").draggable("enable");
} else {
$("#chartdiv").draggable("disable");
}
}
You are simply providing the wrong argument to the EnableDrag() function. The value of the checkbox never changes, it is the checked state (or property) of the element that changes.
Simply change the html where you define the checkbox from
<input type="checkbox" onClick="EnableDrag(this.value);" checked>Chart drag
to
<input type="checkbox" onClick="EnableDrag(this.checked);" checked>Chart drag
I've updated your jsfiddle here to reflect that: http://jsfiddle.net/dmmqwr6d/1/
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!
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
}
I have a MVC3 app using Project Awesome (http://awesome.codeplex.com/), but I am getting a weird behaviour on checkboxes. I have the following simple Html within a Modal popup <input type="checkbox" class="check-box" name="IsDeleted">
When I submit the form containing this element, its post value is 'on' instead of the expected 'true' (when element is checked).
Does anybody know why this is? I am assuming there may be some javascript somewhere messing with the form data, but wanted to check whether there isn't some HTML I am missing.
Thanks
Set the checkboxes value attribute to true and you will get true in your post value.
It's browser specific, I suppose, what to send when value is undefined. You need to defined value attribute on your radios/checkboxes to be sure what will be passed back to you. I would suggest value="1"
set data-val="true" and value="true" by deafult...
if checkbox is checked then returns true
Check Checkbox is checked or not if checked set Hidden field true else set hidden field false.
$('#hiddenFieldId').val($('#CheckBoxId').attr('checked')=='checked')
Surely you should just check if it is set - the value that it sends across is irrelevant, if it's not checked, then nothing at all gets sent when you POST.
Nothing worked!
I ended up on a hacky way after seeing the serialised form object just before posting to controller/action. Its not safe in case if anyone would have any textboxes inside that may contain ampersands. In my case, i had an array of checkboxes, so I did this hack after I am very sure, i won't have problems.
var formData = $("#form").serialize();
formData = formData.replaceAll('=on&','=true&');
if (formData.endsWith('=on'))
{
formData = formData.substring(0, formData.length - 3) + "=true";
}
Hope it helps to those 'someone' with my scenario. Happy hacking.
Use jQuery for cross-browser decision. And it will return true or false anyway.
$('#check-box-id').attr('checked' ) == true
if your checkbox has an id check-box-id. For your current version use the next (select by class name):
$('.check-box').attr('checked' ) == true
Use jQuery
var out=$('.check-box').is('checked')
If checkbox is checked out=true
else out=false
In HTML, add a input type="hidden" above checkbox:
<input name="active" id="activeVal" type="hidden">
<input id="active" type="checkbox">
Then, add a script as below:
$('#activeVal').val($('#active').is(':checked'));
$('#active').change(function() {
$('#activeVal').val($('#active').is(':checked'));
});
When you do eg. $('#your-form').serialize() in jQuery, you will get value of checkbox when checked active: true or uncheck active: false