Apex Code Development You need to sign in to do that
Don't have an account?
Andee Weir 17 Set ui:inputcheckbox value in javascript
Hi & thanks for taking the time to look at my question,
I have a requirement to only allow system admins to uncheck a checkbox on a custom lightning component. I've included example code below that replicates some of the behaviour but jI cannot work out how to set the value of the checkbox back to true if the alert is displayed. Hopefully it's pretty obvious what I am trying to do from the code. Just for your information the real component has the inputcheckbox inside a <aura:iteration/> so I don't think I can use anything like Document.getElementById().
Thanks again.
Component :-
<aura:component >
<ui:inputCheckbox aura:id="childCheckbox" value="true" change="{!c.onChangeChildCheckbox}"/>Test
</aura:component>
Controller :-
({
onChangeChildCheckbox : function(component, event, helper) {
// If the checkbox was unchecked by the user...
if(!event.getSource().get('v.value')){
var profileName = "Basic User"; // This would normally be coming from the component class
// If the user is not a system administrator, display alert & set the checkbox back to checked
if (profileName != "System Administrator"){
alert("Not Allowed!");
// PROBLEM - How to set the checkbox value to be checked. Code below doesn't work
var temp = event.getSource();
temp.value = true;
}
}
}
})
I have a requirement to only allow system admins to uncheck a checkbox on a custom lightning component. I've included example code below that replicates some of the behaviour but jI cannot work out how to set the value of the checkbox back to true if the alert is displayed. Hopefully it's pretty obvious what I am trying to do from the code. Just for your information the real component has the inputcheckbox inside a <aura:iteration/> so I don't think I can use anything like Document.getElementById().
Thanks again.
Component :-
<aura:component >
<ui:inputCheckbox aura:id="childCheckbox" value="true" change="{!c.onChangeChildCheckbox}"/>Test
</aura:component>
Controller :-
({
onChangeChildCheckbox : function(component, event, helper) {
// If the checkbox was unchecked by the user...
if(!event.getSource().get('v.value')){
var profileName = "Basic User"; // This would normally be coming from the component class
// If the user is not a system administrator, display alert & set the checkbox back to checked
if (profileName != "System Administrator"){
alert("Not Allowed!");
// PROBLEM - How to set the checkbox value to be checked. Code below doesn't work
var temp = event.getSource();
temp.value = true;
}
}
}
})
Thanks for taking the time to reply.
In the end it was quite simple.
Replaced :-
// PROBLEM - How to set the checkbox value to be checked. Code below doesn't work
var temp = event.getSource();
temp.value = true;
With :-
event.getSource().set("v.value", true);
Thanks again,
Andee
All Answers
Just try temp.checked = true
Thanks,
Abhishek Bansal.
Afraid that doesn't work. Get the following error :-
This page has an error. You might just need to refresh it.
Action failed: c:TestInputCheckbox$controller$onChangeChildCheckbox [Cannot add property checked, object is not extensible]
Failing descriptor: {c:TestInputCheckbox$controller$onChangeChildCheckbox}
Interestingly if I add an alert(temp); after initialising it it does come back with :-
SecureComponentRef: markup://ui:inputCheckbox {5:0} {childCheckbox}{ key: {"namespace":"c"} }
Any other ideas?
Hi Andee,
It looks like the property is not being applied to the checkbox itself and being applied to some other object that is not extensible. Since it is related to the javascript stuff so we need to debug the code in order to find the right solution.
It would be good if you can contact me on Gmail : abhibansal2790@gmail.com or Skype : abhishek.bansal2790.
Thanks,
Abhishek Bansal
Thanks for taking the time to reply.
In the end it was quite simple.
Replaced :-
// PROBLEM - How to set the checkbox value to be checked. Code below doesn't work
var temp = event.getSource();
temp.value = true;
With :-
event.getSource().set("v.value", true);
Thanks again,
Andee