On the application I am working on I need to disable an element under one of two different circumstances, one if the logged in user only has read only access to the form, two if the conditional logic set up on the field is met. These forms are being generated dynamically, built on the admin panel with drag and drop fields.
The issue I am having is when the conditional logic case has been met but the form is not read only. In the case I am trying now it's to disable some of the fields if the form is being reopened (already saved).
The input looks like this:
<input name="userName" id="userName" maxlength="64" type="text" class="k-textbox custom-disable" data-bind="value: formData.userName, disabled: isFormDisabled">
The conditional logic sets the disabled property on the input, as well as adding the custom-disable class for CSS. isFormDisabled is a boolean property of the viewModel.
What I would like to do is create a function like this:
ViewModel = kendo.observable({
...,
isFormDisabled: false,
isElementDisabled: function (e) {
var customDisabled = $(e.target).hasClass( "custom-disable" );
return this.get("isEventDisabled")||customDisabled;
},
...
});
and change the binding of disabled to this new function, but since the disabled is not an event, when I log e it's undefined - how can I find the element being bound to this iteration of the callback?
This is what I ended up figuring out - for the function:
isElementDisabled: function (eID) {
var me = this;
var element = $("#" + eID);
var customDisabled = $(element).hasClass("custom-disable");
return me.get("isEventDisabled") || customDisabled;
},
and the binding -
<input name="#: columnName #" id="#: columnName #"
data-bind='value: #: dataContainer #.#: columnName #, disabled: isElementDisabled("#: columnName #")'
/>
Since the ID of the element matches the column name and is unique, I can find it by passing that ID into the bound function as a property.