Enabling Disabling controls with Javascript in Asp.net

Question

I have a fileupload control, Calendar control and a Textbox control in asp.net, which should be enabled or disabled on selection of a check box. I have included a javascript function to perform the same, for asp:Textbox I am able to perform enable disable successfully however for RadDatePicker and AsyncFileUpload enable disable is not applied.

The below are the controls

<telerik:RadDatePicker ID="cmgStartDate">
<ajaxToolkit:AsyncFileUpload ID="AsyncFileUploadComingSoon">
<asp:TextBox ID="txtcmgStartTime">

<asp:CheckBox ID="chkIsFutureMovie" OnChange="javascript:enablecmgSoonControls()"/>

The below is javascript function called when checkbox is checked/unchecked..

    <script type="text/javascript" language="javascript">
        function enablecmgSoonControls() {
            var imageUpload = "<%= AsyncFileUploadComingSoon.ClientID %>";
            var cmgsoonStartDate = "<%= cmgStartDate.ClientID %>";
            var cmgText = "<%= txtcmgStartTime.ClientID %>";

            if (document.getElementById("<%= chkIsFutureMovie.ClientID %>").checked == true) {
                document.getElementById(imageUpload).disabled = false;
                document.getElementById(cmgsoonStartDate).disabled = false;
                document.getElementById(cmgText).disabled = false;
            }
            else {
                document.getElementById(imageUpload).disabled = true;
                document.getElementById(cmgsoonStartDate).disabled = true;
                document.getElementById(cmgText).disabled = true;
            }
        }
</script>

I tried by identifying the control with $find, it didn't work. What am I missing here..

Answer 1

Rather than writing

document.getElementById(<%= txtcmgStartTime.ClientID %>")

Try using:

document.getElementById("cmgstartDate")
document.getElementById("AsyncFileUploadComingSoon")

I think this will work because ultimately the code which you've written will appear as html. Do one thing more when you run your website do inspect element of controls and confirm whether the Id you've created and ID we're getting in html are same or not.

Answer 2

I was able to successfully enable/disable Ajax control by specifying its elementId directly. However, the major problem was with Telerik control. I have modified my script as below to enable/disable <telerik:RadDatePicker ID="cmgStartDate"> . Hope it helps someone.

<script type="text/javascript" language="javascript">
        function enablecmgSoonControls() {

            var picker = $find("<%=cmgStartDate.ClientID %>")
            var cmgText = "<%= txtcmgStartTime.ClientID %>";

            if (document.getElementById("<%= chkIsFutureMovie.ClientID %>").checked == true) {
                document.getElementById(cmgText).disabled = false;
                picker.set_enabled(true);
                picker.get_popupButton().disabled = false;
                picker.get_popupButton().className = "rcCalPopup";
            }
            else {
                document.getElementById(cmgText).disabled = true;
                picker.set_enabled(false);
                picker.get_popupButton().disabled = true;
                picker.get_popupButton().className = "rcCalPopup rcDisabled";
            }
        }
</script>