8,872,152 members and growing!

Licence	CPOL
First Posted	3 Jan 2011
Views	235
Downloads	0
Bookmarked	0 times

Enabling a server side disabled check box using javascript on client side in IE

By sachik1 | 4 Jan 2011 | Article

ASP.NETJavascript

IE does not enable a server side disabled check box using javascript

Introduction

How to enable a server side disabled check box using java script in IE

Background

IE does not enable a server side disabled check box on the client side using a java script. However Mozilla does. This is a non standard behavior across browsers.

Here is the aspx page

<%@ Page Language="C#"
         AutoEventWireup="true"
         CodeBehind="Default.aspx.cs"
         Inherits="WebApplication1._Default"
%>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">
    <title></title>

    <script type="text/javascript">
        function Toggle(sender) {
            var chk = document.getElementById('chk2');
            chk.disabled = !sender.checked;

            chk = document.getElementById('chk3');
            chk.disabled = !sender.checked;

            return false;
        }
    </script>

</head>
<body>
    <form id="form1" runat="server">
    <div>

        <asp:CheckBox ID="chk1" runat="server"
        onclick="javascript:Toggle(this);" />

        <asp:CheckBox ID="chk2" runat="server" />

        <asp:CheckBox ID="chk3" runat="server" />
    </div>
    </form>
</body>
</html>

Here is the code behind
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace WebApplication1
{
    public partial class _Default : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
            {
                chk2.InputAttributes.Add("disabled", "disabled");
                chk3.Enabled = false;
            }
        }
    }
}

In Mozilla both the check boxes chk2 & chk3 get enabled / disabled using the javascript.

However in IE, check box, chk3 does not respond to javascript.

The reason for it is the way the tags are rendered

The asp.net check box disabled on the server gets rendered as

<span disabled=”disabled”>….

So even when the check box is enabled using javascript, it does not get enabled in IE. However Mozila deals with it fine and enables the check box.