根据SAPUI5中的复选框标志激活输入字段

Question

I am trying to activate an input field based on the checkbox flag. The input field is not getting activated. Please help. Below are the snippets from the view and the component.

View------------------------------------------

<mvc1:View
   controllerName="sap.ui.demo.wt.controller.App"
   xmlns="sap.m"
   xmlns:mvc1="sap.ui.core.mvc1">

<CheckBox id="ch1" text="Test" selected="false" select ="checkDone" enabled="true" />

<Input  id="i1" enabled="false"></Input>

</mvc1:View>

Controller---------------------------------------

sap.ui.define([
                   "sap/ui/core/mvc/Controller"
                ], function (Controller) {
                   "use strict";
                   return Controller.extend("sap.ui.demo.wt.controller.App",{
                       checkDone: function (oEvent) {
                           var check = oEvent.getParameter("selected");
                            if (check === true){
                             sap.m.Input({id:"i1",
                                enabled:"true",
                                label: "Amount",
                                textAlign: sap.ui.core.TextAlign.Right,
                                value: "INR"
                             });
                           }else {
                                return "";
                           }
                        }
                   }); 
                });

Answer 1

You can bind the enbaled property from the input field to the model value of the checkbox. Then if you check the box it should automatically en-/disable the input field.

Something like this:

<CheckBox id="ch1" text="Test" selected="false" select ="checkDone" value="{someModel>/enabledValue}" enabled="true" />

<Input  id="i1" enabled="{someModel>/enabledValue}"></Input>

Answer 2

             checkDone: function (oEvent) {
                 var check = oEvent.getParameter("selected");
                  if (check){
                   this.getView().byId("i1").setEnabled(true);
                 }else{
                   this.getView().byId("i1").setEnabled(false);
                 }
              }

Check with the above code

For place holder inside input

This is not the preferred way but...

<Input  id="i1" enabled="false" class="placeholder"></Input>

onAfterRendering : function(){
   $(".placeholder .sapMInputBaseInner").attr("placeholder", "Your placeholder Text");
}