I'm having some problems with having a Checkbox disable a corresponding Textbox.
I can get the Checkbox to change the TextBox from Enable to Disable via Javascript, but my problem is the initial setting.
Ex. The Checkbox is Unchecked by default, and the Textbox should be Disabled.
But, when I set the Textbox to Disabled in the extension definition, OR if I try to disable it in the Init, the SetEnabled() method does not work.
How can I make the Textbox default to Disabled, but also be able to Enable it when the Checkbox is checked.
[CSHTML]
C#@Html.DevExpress().CheckBoxList(
settings =>
{
settings.Name = "HomeboundReason";
settings.Properties.RepeatLayout = RepeatLayout.Table;
settings.Properties.RepeatDirection = RepeatDirection.Vertical;
settings.Properties.RepeatColumns = 3;
settings.Properties.Items.Add("Requires assistant for most to all ADL");
settings.Properties.Items.Add("Medical Restrictions");
settings.Properties.Items.Add("Dependent upon supportive devices");
settings.Properties.Items.Add("Unsafe to leave at home unassisted");
settings.Properties.Items.Add("Taxing effort to leave home");
settings.Properties.Items.Add("SOB on exertion");
settings.Properties.Items.Add("Patient is bedridden");
settings.Properties.Items.Add("Other");
settings.PreRender = (s, e) =>
{
MVCxCheckBoxList cbl = (MVCxCheckBoxList)s;
};
settings.Properties.EnableClientSideAPI = true;
settings.Properties.ClientSideEvents.SelectedIndexChanged = "onHomeboundReasonChanged";
}
).GetHtml()
<div class="col-xs-4">
<label for="txtOther">Other</label>
@Html.DevExpress().TextBox(
settings =>
{
settings.Name = "txtOther";
settings.Properties.ClientInstanceName = "txtOther";
settings.Height = Unit.Percentage(200);
settings.Width = Unit.Percentage(33);
settings.Properties.EnableClientSideAPI = true;
settings.Enabled = false;
}).GetHtml()
[JS]
JavaScriptfunction onHomeboundReasonChanged() {
var checkedItem = HomeboundReason.GetSelectedValues();
var txt = txtOther;
if (checkedItem.indexOf("Other") != -1) {
// alert('Found Other!!');
txt.SetEnabled(true);
}
else {
txt.SetEnabled(false);
}
}
It works if I put a script on the page and put it in the document.ready(), but I'd rather not have to put it there if it is not needed.
$(document).ready(function () {
var txt = txtOther;
txt.SetEnabled(false);
});