Enable textbox upon dropdown selection in xeditable grid

[estoysol]

I have a x-editable grid with dropdown, textbox and a disabled textbox, When the user clicks add new row a row got added. But I want the textbox should be in disabled state by default. Only upon user selects an item from dropdown, the textbox next to it should get enabled. How to achive this. Below is my code. `

ROLE NAME NAME POSITION Action

                    </thead>
                    <tbody>
                        <tr ng-repeat="item in section.items | filter:globalSearchvalues | orderBy:predicate:reverse" class="editable-row" ng-if="checkEmpty(item)">

                            <td class="select-td">
                                <span editable-select="item.ROLEID" e-name="ddlrole" e-form="rowform" e-selectpicker
                                      e-ng-options="g.ROLEID as g.ROLE for g in section.role">
                                    {{ item.ROLE }}
                                </span>
                            </td>
                            <td>
                                <span editable-text="item.FULLNAME" e-typeahead-editable="false"  e-ng-disabled=true
                                      e-name="txtName" e-form="rowform" e-placeholder="Name"  e-required>
                                    {{ item.FULLNAME }}
                                </span>
                            </td>
                            <td>
                                <span editable-text="item.JOBTITLE" e-name="txtJobTitle" e-form="rowform" e-ng-disabled=true e-required>
                                    {{ item.JOBTITLE  }}
                                </span>
                            </td>

                            <td>
                                <form editable-form name="rowform" onbeforesave="saveItem($data, item)" ng-show="rowform.$visible" class="form-buttons form-inline" shown="section.inserted == item">

                                    <span class="glyphicon glyphicon-ok" title="Save" ng-disabled="rowform.$waiting" ng-click="rowform.$submit()"></span>
                                    <span class='glyphicon glyphicon-remove' title="Cancel" ng-disabled="rowform.$waiting" ng-click="rowform.$cancel();cancelItem(item,sectionIndex)"></span>
                                </form>
                                <div class="buttons" ng-show="!rowform.$visible">
                                    <span class='glyphicon glyphicon-edit' title="Edit" ng-click="rowform.$show();editItem(item, sectionIndex)"></span>
                                    <span class='glyphicon glyphicon-trash' title="Delete" ng-click="deleteItem(item,sectionIndex)"></span>
                                </div>
                            </td>
                        </tr>
                    `</tbody>``

[ckosloski]

Maybe something like:

<td class="select-td">
                                <span editable-select="item.ROLEID" e-name="ddlrole" e-form="rowform" e-selectpicker
                                      e-ng-options="g.ROLEID as g.ROLE for g in section.role" e-ng-change="displayText = true">
                                    {{ item.ROLE }}
                                </span>
                            </td>
                            <td>
                                <span editable-text="item.FULLNAME" e-typeahead-editable="false"  edit-disabled="{{displayText}}"
                                      e-name="txtName" e-form="rowform" e-placeholder="Name"  e-required>
                                    {{ item.FULLNAME }}
                                </span>
                            </td>

A jsfiddle or plunker would be more helpful.

See disable documentation.

[ckosloski]

@estoysol are you still having an issue?