Lightning Input Readonly not working?

Question

I am passing the value for the readonly attribute from the parent to the inner child lightning input.

Parent cmp:

<c:Childcmp  isReadOnly="{!v.isReadOnly}" />

Parent ctrller:

handleEvent : function(component, event, helper) {
    var name =event.getParam("ReadOnly");
     if(name=="true")
    {
        component.set("v.isReadOnly",name);
    }
    else
    {
        component.set("v.isReadOnly",name);
    }
    }

Child cmp:

<lightning:input disabled="{!v.isReadOnly}"/> (or)
<lightning:input readonly="{!v.isReadOnly}"/>

Child Ctrller:(Onchange of input)

 var valueOfElementChanged=event.getSource().get("v.value");
 if(valueOfElementChanged=='License')
            {     
                var compEvents = component.getEvent("componentEventFired");
                compEvents.setParams({ "ReadOnly" : "true" });
                compEvents.fire();
            }
            else{
                var compEvents = component.getEvent("componentEventFired");
                compEvents.setParams({ "ReadOnly" : "false" });
                compEvents.fire();
            }

Its working well when the readonly attribute is sent as true, but when false value is sent, still its readonly not changing it to editable.

When I inspect the lightning input field, I still see the read only attribute in the tag, which should be removed actually when it as false.

How to make it as editable when it an false value is set?

Answer 1

We set false or true value to an attribute like

component.set("v.isReadOnly",false);

not

component.set("v.isReadOnly","false");

Answer 2

This should be your Parent ctrller: if you want to use the Same string type for the event(componentEventFired) attribute(ReadOnly).

handleEvent: function(component, event, helper) {
  const isReadOnly = event.getParam("ReadOnly");
  component.set("v.isReadOnly", (isReadOnly === 'true'));
}

---

UPDATE:

And if you can change the event(componentEventFired) attribute(ReadOnly) from String to Boolean then you just need to do this in Parent ctrller:

handleEvent: function(component, event, helper) {
  const isReadOnly = event.getParam("ReadOnly");
  component.set("v.isReadOnly", isReadOnly);
}

and one more change required in Child Ctrller:(Onchange of input)

const valueOfElementChanged = event.getSource().get("v.value");

const compEvents = component.getEvent("componentEventFired");
compEvents.setParams({ "ReadOnly" : (valueOfElementChanged === 'License') });
compEvents.fire();