I have a list of Users to select for a team. Imagine that i select a User, he can either be active or inactive in his team. Now, if i don't select him at all, i should not be able to either activate or deactivate him.
This is made by a checkbox and a slider, like this:
When I click the checkbox, i need to disable the toggle. I have tried doing this by:
$("#2048").prop('disabled', true);
or
document.querySelector('[name="' + '#2048' + '"]').disabled = true;
Does not work either (And yes, i know that IDs should not be numbers, but it's because every toggle is inside a *ngFor. Still, i can use them as numbers, as jQuery can select them anyway)
Either way, i strongly believe that the only way to do something like this is to data-bind the 'disabled' attribute as some back-end variable that returns either a 'true' or 'false' value.
Something like:
<mat-slide-toggle
[id]='data.id'
class="status"
[disabled]='disableVariable'
>Active
</mat-slide-toggle>
and then:
disableVariable = someFunction(); //that returns true or false
This works, but the variable is 'too generic', i mean, every single slider will become disabled. Another problem is that this is not 'real-time', so i cant disable and enable multiple times.
Basically, it does not do the job.
What should i be doing here? If i had a way to select those tags using their unique ID's, that would fix the problem, but neither jQuery or Javascript's Query selector can disable or enable this tag.
EDIT:
A litle more of my code:
<div id="table" *ngFor="let data of User; let i = index">
<div [id]='data.id' *ngIf='data.user== 0' class="item">
<label class="container" style="width: 90%">
<input
type="checkbox"
*ngIf='data.status== 0'
id={{i}}
class="checkbox"
color=primary
checked>
<span class="checkmark"></span>
<div *ngIf='data.status== 0'>{{data.name}}
<mat-slide-toggle
[id]='data.id'
(change)=toggle(data.id)
*ngIf='data.status== 0'
color=primary
class="status"
>Active
</mat-slide-toggle>
</div>
</label>
</div>
</div>
When i add the ([ngModel)], my checkboxes stop working, and yes, i'm importing the FormsModule
You can use two-way binding to update the status of the checkbox as follows:
Add [(ngModel)] and disabled property to the input field
// Declare variable in component
CheckboxVar:boolean;
// In Html write below code
<input type="checkbox" [(ngModel)]="CheckboxVar" [disabled]="!CheckboxVar">
// Disabled checkbox when checkboxvar = false;
<input type="checkbox" [disabled]="!CheckboxVar">
Update CheckboxVar variable as per your need in your component.
Example with mat-slide-toggle
TS Code:
checked = false;
disabled = false;
HTML Code:
<input type="checkbox" [(ngModel)]="checked">
<mat-slide-toggle [disabled]="checked">
Slide me!
</mat-slide-toggle>
Now in the above example, if you checked the checkbox checked variable will be updated and if checked equals true then your toggle will be disabled.
If I understand the requirement correctly:
HTML Code:
<div *ngFor="let obj of list">
<mat-checkbox [(ngModel)]="obj.inTeam">In Team</mat-checkbox>
<br><br>
<mat-slide-toggle [(ngModel)]="obj.inTeam">Active</mat-slide-toggle>
</div>
TS Code:
list = [
{ id : 1,inTeam: false, isActive: false },
{ id : 3,inTeam: false, isActive: false },
{ id : 3,inTeam: false, isActive: false },
{ id : 4,inTeam: false, isActive: false }
]
StackBlitz
Related
In jquery 3.4.1 app I have checkbox defined
<div class="form-row mb-3 mt-3">
<label for="step_2_invoice_on_next_period_cbx" class="col-12 col-sm-6 col-form-label">Invoice on next period</label>
<div class="col-12 col-sm-6">
<input type="checkbox" value="1" style="width: 50px;padding-left: 10px; margin-top: 7px;"
id="step_2_invoice_on_next_period_cbx"
checked>
</div>
</div>
and I got valid true if checkbox input is selected. But I got undefined if checkbox input not is selected
and I need to set additive condition :
var step_2_invoice_on_next_period_cbx= $("#step_2_invoice_on_next_period_cbx:checked").val()
if(typeof step_2_invoice_on_next_period_cbx=='undefined') step_2_invoice_on_next_period_cbx= false
Looks like it works ok, but if there is a better way to got valid true/false condition without additive
checking line ?
Thanks!
Solution
This is the way you should go about doing this this way will listen for when the checkbox is checked (true or false) how it does this is by listening for the checkbox to be clicked when it is clicked it will run everything inside of stepTwoInvoiceOnNextPeriodCbx.click() what we are doing inside of the stepTwoInvoiceOnNextPeriodCbx.click() event is checking if the property checked is true or false (stepTwoInvoiceOnNextPeriodCbx.prop("checked")) if this is true in my code example we are going to change the text of the element with an id of #text to "Is checked" when true and "is not checked" when false.
JavaScript
let stepTwoInvoiceOnNextPeriodCbx = $(
"#step_2_invoice_on_next_period_cbx"
);
let text = $("#text"); // This is just here to show output of the example
// Listen for checkbox to be click
stepTwoInvoiceOnNextPeriodCbx.click(() => {
// If the checked property
if (stepTwoInvoiceOnNextPeriodCbx.prop("checked")) {
// Is true set text to "Is checked"
text.text("Is checked");
} else {
// Is false set text to "Is not checked"
text.text("Is not checked");
}
});
HTML
<div id="app">
<div class="form-row mb-3 mt-3">
<label
for="step_2_invoice_on_next_period_cbx"
class="col-12 col-sm-6 col-form-label"
>Invoice on next period</label
>
<div class="col-12 col-sm-6">
<input
type="checkbox"
value="1"
style="width: 50px; padding-left: 10px; margin-top: 7px;"
id="step_2_invoice_on_next_period_cbx"
checked
/>
</div>
<span id="text"></span>
</div>
</div>
Here is an example I made so you can see how it works https://codesandbox.io/s/compassionate-blackwell-d9hex?file=/src/index.js
What your code is doing
You are checking to see if the data type of the value property is "undefined", "undefined" and undefined are two different things since you are checking the type of the data what you are telling the computer to do is check if the type of the value property is equal to (==) a string (text data type) with the value of undefined ("undefined") this comparison is not checking the data types you would have to use the identical operator (===) this checks the value and data type are the same. the val() method get the value property of the HTML element this in your case will always be undefined because it is never set.
The way you have coded this also means that it will only run once the page has loaded since you are not listening for a event (like click() in my example) the click() event means anytime the #step_2_invoice_on_next_period_cbx element is clicked run the function inside of the click() event.
Other things to keep in mind
In JavaScript, it is good practice to use camelcase for naming varibles and functions, not undersorces (snakecase) languages like PHP use snakecase (this_is_snake_case) while in JavaScript we use camelcase (thisIsCamelCase) but we tend use pascalcase (ThisIsPascalCase) for class names.
It looks like you want prop: https://api.jquery.com/prop/
Not sure what you're trying to accomplish based on the code, so here is some examples:
This code will take a checkbox that is checked and uncheck it for instance:
$(document).ready(function() {
var step_2_invoice_on_next_period_cbx= $("#step_2_invoice_on_next_period_cbx:checked");
if (step_2_invoice_on_next_period_cbx.prop("checked")) {
step_2_invoice_on_next_period_cbx.prop("checked", false);
}
})
This code will take a checkbox that is not checked and do something
$(document).ready(function() {
var step_2_invoice_on_next_period_cbx= $("#step_2_invoice_on_next_period_cbx:checked");
if (!step_2_invoice_on_next_period_cbx.prop("checked")) {
//do something
}
})
JavaScript
var isChecked = document.querySelector("#step_2_invoice_on_next_period_cbx").checked;
jQuery
var isChecked = $("#step_2_invoice_on_next_period_cbx").prop("checked");
$("#step_2_invoice_on_next_period_cbx:checked") gets you a HTML element with
id="step_2_invoice_on_next_period_cbx"
state "checked"
For an unchecked element the second condition is false and will return undefined for you.
Trying to implement a checkbox where I can dynamically set the value (and have it appear in the box).
HTML
<mat-checkbox *ngIf="isReply()" class="col-2" formControlName="checkbox" [checked]="false" >CheckBox off</mat-checkbox>
<mat-checkbox *ngIf="!isReply()" class="col-2" formControlName="checkbox" >CheckBox</mat-checkbox>
materials.module.ts
addCheckbox() {
this.checkboxForm = this.fb.group({
'CheckBox':true,
main.module.ts
isReply(): boolean {
return: true;
}
There is a radio button that toggles isReply() off and on.
When I toggle isReply() on, I can see the CheckBox label change from "CheckBox" to "CheckBox off" but the checkbox status (visibly) does not change.
I can apply other logic which responds to the checkbox being off, even though the checkbox is still visibly checked (true). This changes the value of the checkbox to false, even though the checkbox is still visibly checked (true).
When I click on the checkbox (clear the visible box) the value toggles and the response is as expected, the value of checkbox is now true, even though the box is not checked.
I have made the following changes which STILL do not work
adjust this to:
<div class="row" *ngIf="isReply()">
<mat-checkbox class="col-2" formControlName="checkBox" >CheckBox</mat-checkbox>
</div>
<div class="row" *ngIf="!isReply()">
<mat-checkbox class="col-2" [checked]='true'
formControlName="checkBox" >CheckBox</mat-checkbox>
</div>
In the ts:
addCheckbox() {
this.checkboxForm = this.fb.group({
'checkBox':false,
I have two radio buttons (standard & reply).
The html for the radio buttons:
<form [formGroup]="materials.SignatureType">
<mat-radio-group formControlName="sigtype" >Signature Type:
<label><input type="radio" value="standard" formControlName="sigtype">
<span> Standard</span>
</label>
<label><input type="radio" value="reply" (click)="setBoxes()" formControlName="sigtype" >
<span> Reply</span>
</label>
</mat-radio-group>
The code for setBoxes():
if (this.isReply) {
this.materials.checkboxForm.value.checkBox = false;
}
else {
this.materials.checkboxForm.value.checkBox = true;
}
The click on "reply" radio button changes the value for the checkBox but does not change the state of the button.
I can not get the button state to change OTHER THAN to click on the checkbox.
Using Angular 7.2.3 [(ngModel)] is deprecated.
try:
In your component.html
<div class="container-fluid p-5 mt-2 mb-2" >
<mat-checkbox class="col-2" [checked]="var1" >CheckBox off</mat-checkbox>
<mat-checkbox class="col-2" [checked]="var2" >CheckBox</mat-checkbox>
</div>
In your component.ts file
var1 = false;
var2 = true
You just need binding checked property then you can change the value of var1 and var2 in your logic.
I was having this issue with my project.
I had my checkboxes wired up with the [checked]=... but I had missions getting it to work as expected. Which was to show non selected items as opacity: 40%; and have the box ticked next to the selected item.
eg. sometimes there would be a checked box and no selected items, or multiple checked boxes, or a selected item and no checked box... Very strange.
My conclusion; it's being set programatically and being over ridden by the click action.
TLDR;
My solution; change the click action configuration in the module providers by specifying:
MAT_CHECKBOX_CLICK_ACTION, useValue: 'noop'
this will leave any click actions in your hands for developer implementation.
Check the docs for more deets -> https://v6.material.angular.io/components/checkbox/overview
I need to know if a radio button has been selected to hide / show other options.
<input #r4 type="radio" name="x">
<span>Group</span>
<div class="subOption" *ngIf="r4.checked"></div>
div.subOption must be displayed when it has been selected.
it's correct?¿
I would just create a new boolean variable in the component, that you set as true when radio button has been checked. With that boolean you then display the div. So for example:
isChecked: boolean = false; // our new variable
<input type="radio" name="x" (click)="isChecked = true">
<div *ngIf="isChecked">
<!-- Your code here -->
</div>
EDIT: As to multiple radiobuttons... as mentioned in a comment, radio buttons seems at this point be kind of buggy with Angular. I have found the easiest way to deal with radio buttons seems to be using a form. So wrap your radio buttons in a form, like so:
<form #radioForm="ngForm">
<div *ngFor="let val of values">
<input (change)="changeValue(radioForm.value)" type="radio" [value]="val.id" name="name" ngModel />{{val.name}}
</div>
</form>
whereas on radio button would look like the following in this example:
{
id: 1,
name: 'value1'
}
In the form there is a change event, from which we pick up the chosen radio button value.
(change)="changeValue(radioForm.value)"
Then I would just play with boolean and the value chosen:
changeValue(val) {
this.valueChosen = true; // shows div
this.chosenVal = val.name; // here we have the value chosen
}
A plunker to play with: here
I have check boxes in my application. I put it inside directive. Now the problem is I want to unchecked any of checked boxes from controller. I am able to unchecked all checkboxes but not particular one. Is there any way to tell the directive to unchecked the checkbox by setting model value to false.
DIRECTIVE:
.directive('filterCheckbox', ['$compile', function ($compile) {
return {
link:function(scope,element,attrs){
var temp = '<div class="check-box pull-left">' +
'<span class="ft" data-ng-class="{\'active\': '+attrs.ngModel+' ,\'inactive\':'+!attrs.ngModel+'}"></span>' +
'</div>' +
'<input type="checkbox" data-ng-model="'+attrs.ngModel+'" class="hide" data-ng-click="getFilteredAttrs(this)">'
element.html($compile(temp)(scope));
scope.$on('clear-filter',function(){
scope[attrs.ngModel] = false;
});
scope.$on('selected-filter',function(event,args){
//console.log('scope data',args);
//console.log('scope ', scope[attrs.ngModel]);
});
}
}
HTML:
<div class="inner-filter-section col-xs-3">
<h5 class="nova-bold">Status</h5>
<div class="outer-filter-section">
<div class="filter-option" ng-repeat=" status in filterStatusItems">
<label data-filter-checkbox class="pull-left filter-checkbox" ng-model="active" data-ng-click="setFilterObj('status')"></label>
<span class="options">{{status}}</span>
</div>
</div>
</div>
JS:
$scope.filterStatusItems = ['Success','Pending','Failed','Running','Timeout','Flow Import','Shared','Credits'];
Here is a solution in plunker
I just didn't see the use of a directive here. If you have some other behavior to add feel free to correct me.
I simply init into the scope a collection that will hold the checkboxes references :
$scope.checkboxes = [];
On the input init i add an entry in the $scope.checkboxes collection
ng-init="checkboxes.push({status:status, value:false})"
I bind this value to the input. I use the $index to bind the right object to the input :
checkboxes[$index].value
Now the uncheck mechanics :
Here i only display the status with a property value as true
On click i just set the value as false
<button ng-click="checkbox.value = false" ng-repeat="checkbox in (checkboxes | filter:{value:true}) ">
{{checkbox.status}}<span ng-if="!$last">,</span>
</button>
And that's pretty much all.
Hope it helped. If that was a mistake from me removing the directive just let me know that i can adapt a bit what i've done to your needs.
use ng-checked and set the value like true or false or assign ng-model value
<input type="checkbox" ng-model="master"><br/>
<input id="checkSlave" type="checkbox" ng-checked="master">
I am trying to toggle the value of a checkbox using the following code:
<div class="control-group">
<label class="control-label checkbox" for="IsViewAsWebpage">
{{#if this.IsViewAsWebpage}}
<input type="hidden" id="IsViewAsWebpage" name="IsViewAsWebpage" value="true"/>
<input type="checkbox" class="enable-checkbox" checked />
{{else}}
<input type="hidden" id="IsViewAsWebpage" name="IsViewAsWebpage" value="false"/>
<input type="checkbox" class="enable-checkbox" />
{{/if}}
<span>View as Webpage</span>
</label>
</div>
'click .enable-checkbox': function (e) {
if (e.currentTarget.parentElement.htmlFor == "IsViewAsWebpage") {
this.$('#IsViewAsWebpage').is(':checked');
}
}
I know I am misssing something in the click function. I would basically want to toggle the checkbox value when the user clicks on it. Can someone point me to the right directions pls. Thank you.
When your checkbox gets clicked, it's going to toggle. That's the way checkboxes work.
If you want the hidden input to change value when the checkbox is toggled, I think what you want is this:
$(".enable-checkbox").change(function (e) {
if($(this).parent().attr("for") == "IsViewAsWebpage") {
var checked = $(this).is(":checked"); // Returns true/false.
$('#IsViewAsWebpage').attr("value", checked); // Sets true/false.
}
});
If you want to use handlebars.js to switch content when you click an check box, you will need to replace your content by calling handlebars each time you make a modification to your checkbox
$(".enable-checkbox").change(function (e) {
if($(this).parent().attr("for") == "IsViewAsWebpage") {
var checked = $(this).is(":checked");
IsViewAsWebpage = checked;
$("#yourcontainer").html(Handlebars.compile(yourtemplatesource));
}
}
then your IsViewAsWebpage variable should be global and your mustache condition should only be :
{{#if IsViewAsWebpage}}
But this is complicated for nothing... just use Aesthete solution, it will save you a lot of time.