sjd0103
asked on
Changing Input Disabled property via JavaScript problem
I tried this question in Web Dev yesterday and got no response so...
I have 2 types of JavaScript actions that I'm taking:
1. When a checkbox is checked, a textbox becomes "enabled"...when unchecked, "disabled". This works fine.
2. When a checkbox is checked, a checkboxlist (an array of checkboxes) becomes "enabled"...when unchecked, "disabled". This works fine, UNLESS I set the .Disabled property of the checkboxlist to =true in the code-behind.
Now, I am setting the .Disabled property =true to both the textbox and the checkboxlist in the code-behind on page_load. This renders the following HTML:
Textbox:
<td colspan="2"><a name="2"><textarea name="txtCSAS" rows="2" id="txtCSAS" disabled="disabled" class="normalText"></texta rea></a></ td>
Checkboxlist (one of the checkboxes):
<td><span disabled="disabled"><input id="chklstMB_0" type="checkbox" name="chklstMB:0" disabled="disabled" /><label for="chklstMB_0">MBTest 0</label></span></td>
The JavaScript DOES work if I do NOT set the .Disabled property =true in the code-behind, but I must have control of the .Disabled in the code-behind and in JavaScript.
The difference in the rendered HTML is that when I set the .Disabled property =true in the code-behind, disabled="disabled" is rendered. When I don't, then no disabled property is rendered.
I'm not going to post the JavaScript unless it's asked for, for the sake of space. The meat of it does this:
Textbox:
textBox.disabled=false; or textBox.disabled=true;
Checkboxlist (iterate thru the array of form "input" controls):
arr[i].disabled=false; or arr[i].disabled=true;
How can I have control via both JavaScript (client side) and code-behind (server side)?
Thank you.
I have 2 types of JavaScript actions that I'm taking:
1. When a checkbox is checked, a textbox becomes "enabled"...when unchecked, "disabled". This works fine.
2. When a checkbox is checked, a checkboxlist (an array of checkboxes) becomes "enabled"...when unchecked, "disabled". This works fine, UNLESS I set the .Disabled property of the checkboxlist to =true in the code-behind.
Now, I am setting the .Disabled property =true to both the textbox and the checkboxlist in the code-behind on page_load. This renders the following HTML:
Textbox:
<td colspan="2"><a name="2"><textarea name="txtCSAS" rows="2" id="txtCSAS" disabled="disabled" class="normalText"></texta
Checkboxlist (one of the checkboxes):
<td><span disabled="disabled"><input
The JavaScript DOES work if I do NOT set the .Disabled property =true in the code-behind, but I must have control of the .Disabled in the code-behind and in JavaScript.
The difference in the rendered HTML is that when I set the .Disabled property =true in the code-behind, disabled="disabled" is rendered. When I don't, then no disabled property is rendered.
I'm not going to post the JavaScript unless it's asked for, for the sake of space. The meat of it does this:
Textbox:
textBox.disabled=false; or textBox.disabled=true;
Checkboxlist (iterate thru the array of form "input" controls):
arr[i].disabled=false; or arr[i].disabled=true;
How can I have control via both JavaScript (client side) and code-behind (server side)?
Thank you.
ASKER
The CheckBoxList that I'm using is being run server side. The <input> tag that I included above is just one of the checkboxes that is rendered as a part of the .NET CheckBoxList....(.NET is rendering HTML based on the type of control used...the list of <input> controls that represents a .NET CheckBoxList since there is not one in HTML).
Anyway, the JavaScript has the correct object and can disable/enable it just fine as long as I DON'T set the disabled property to true in the codebehind on page_load or postback.
Again, if I set the CheckBoxList.Disabled = true in codebehind, the JavaScript .disabled =true (or false) does not change anything. If never do anything with the control via codebehind then the JavaScript works fine.
How can I have them both working together? I am doing the exact same thing with TextBoxes and not having this issue.
Anyway, the JavaScript has the correct object and can disable/enable it just fine as long as I DON'T set the disabled property to true in the codebehind on page_load or postback.
Again, if I set the CheckBoxList.Disabled = true in codebehind, the JavaScript .disabled =true (or false) does not change anything. If never do anything with the control via codebehind then the JavaScript works fine.
How can I have them both working together? I am doing the exact same thing with TextBoxes and not having this issue.
sjd0103 ,
If that is your problem, let see this solution. You can use javascript to disable your web control via code-behind
Private Sub Page_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
'Put user code to initialize the page here
If Not IsPostBack Then
Dim ar As New ArrayList
ar.Add("1")
ar.Add("2")
ar.Add("3")
chkLstEE.DataSource = ar
chkLstEE.DataBind()
Dim jsScript As String
jsScript = "<script language='javascript'>"
jsScript += "document.getElementById(' txtEE').di sabled=tru e;" & vbCrLf
jsScript += "document.getElementById(' chkLstEE') .disabled= true;" & vbCrLf
jsScript += "</script>" & vbCrLf
Page.RegisterStartupScript ("disableC ontrol", jsScript)
End If
'choose check box to enable textbox
chkEE.Attributes.Add("onCl ick", "javascript:document.getEl ementById( 'txtEE').d isabled=(d ocument.ge tElementBy Id('txtEE' ).disabled )==false?t rue:false; ")
'choose check box to enable checkbox list
chkEE2.Attributes.Add("onC lick", "javascript:document.getEl ementById( 'chkLstEE' ).disabled =(document .getElemen tById('chk LstEE').di sabled)==t rue?false: true;")
End Sub
Regards
x_com
If that is your problem, let see this solution. You can use javascript to disable your web control via code-behind
Private Sub Page_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
'Put user code to initialize the page here
If Not IsPostBack Then
Dim ar As New ArrayList
ar.Add("1")
ar.Add("2")
ar.Add("3")
chkLstEE.DataSource = ar
chkLstEE.DataBind()
Dim jsScript As String
jsScript = "<script language='javascript'>"
jsScript += "document.getElementById('
jsScript += "document.getElementById('
jsScript += "</script>" & vbCrLf
Page.RegisterStartupScript
End If
'choose check box to enable textbox
chkEE.Attributes.Add("onCl
'choose check box to enable checkbox list
chkEE2.Attributes.Add("onC
End Sub
Regards
x_com
ASKER
x_com...that did work to change the disabled property of the checkboxlist.
I added chkLstEE.Enabled=false; (I'm using C# by the way...but it's not a problem for me to swap between the two)
to the end of page_load and that breaks the JS again.
This is driving me nuts.
I added chkLstEE.Enabled=false; (I'm using C# by the way...but it's not a problem for me to swap between the two)
to the end of page_load and that breaks the JS again.
This is driving me nuts.
sjd0103,
If you set chkLstEE.Enabled=false via code-behind, you cant enable it back on front-end. The only solution i can see is dont set any property for checkboxlist Enabled property in code-behind. But, the problem is you disable it for the first page load. So, I do suggest you disable it using js via code-behind at page_load. That work fine on me.
If you set chkLstEE.Enabled=false via code-behind, you cant enable it back on front-end. The only solution i can see is dont set any property for checkboxlist Enabled property in code-behind. But, the problem is you disable it for the first page load. So, I do suggest you disable it using js via code-behind at page_load. That work fine on me.
ASKER
I agree that I may be able to work around the issue using JavaScript. That leaves me with that sinking feeling that I've created a workaround for something simple that I just overlooked.
Why is it that a textbox (set to .Disabled=true in code-behind) can be enabled via JS but an checkbox (set to .Disabled=true in code-behind) cannot?
Why is it that a textbox (set to .Disabled=true in code-behind) can be enabled via JS but an checkbox (set to .Disabled=true in code-behind) cannot?
sjd0103 ,
I'm not sure what happend there. But for sure that something related with .net framework itself. After checkboxlist rendered in browser, you'll see it become a table consist of a multiple checkbox item. All the checkbox item had a property for disabled='disabled'. I think if you want to enable it, you got to enable all the item one by one. But, the things is you need to loop all the item with the generated checkbox and disable all the item as well. The problem is all the generated item is client id. However, if you want to set disabled via code-behind, you can simply add your checkboxlist in others html object like <span>,<div>... I think this is the most efficient way to solve it more faster?
eg:
<div id="divLst" runat="server">
divLst.Disabled = True
chkEE2.Attributes.Add("onC lick", "javascript:document.getEl ementById( 'divLst'). disabled=( document.g etElementB yId('divLs t').disabl ed)==true? false:true ;")
Hope that solve your doubt.
Regards
x_com
I'm not sure what happend there. But for sure that something related with .net framework itself. After checkboxlist rendered in browser, you'll see it become a table consist of a multiple checkbox item. All the checkbox item had a property for disabled='disabled'. I think if you want to enable it, you got to enable all the item one by one. But, the things is you need to loop all the item with the generated checkbox and disable all the item as well. The problem is all the generated item is client id. However, if you want to set disabled via code-behind, you can simply add your checkboxlist in others html object like <span>,<div>... I think this is the most efficient way to solve it more faster?
eg:
<div id="divLst" runat="server">
divLst.Disabled = True
chkEE2.Attributes.Add("onC
Hope that solve your doubt.
Regards
x_com
ASKER
I appreciate your time and posting, but I still am not convinced.
I have the JavaScript to loop the <input> controls and enable/disable the checkbox "list" items. That works fine as long as I don't set it in code-behind.
Agreed that the property disabled='disabled' when rendered in HTML from .NET when I set .Disabled=true in the code-behind...BUT, the same is true for the textbox...and I CAN control that with JavaScript.
That's what's getting me here...the fact that I can do the exact same thing to the textbox, but not the list of checkbox items. Am I making sense?
I have the JavaScript to loop the <input> controls and enable/disable the checkbox "list" items. That works fine as long as I don't set it in code-behind.
Agreed that the property disabled='disabled' when rendered in HTML from .NET when I set .Disabled=true in the code-behind...BUT, the same is true for the textbox...and I CAN control that with JavaScript.
That's what's getting me here...the fact that I can do the exact same thing to the textbox, but not the list of checkbox items. Am I making sense?
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
I've created a solution that works. When adding chkLstEE.Attributes.Add("d isabled", "true"), .NET renders a table with id = chkLstEE and disabled = true. I then change that disabled property via JavaScript. This still cannot be controlled reliably with both JS and code-behind.
x_com, I'll give you the points for the effort (thank you, I don't mean to seem ungrateful). If anyone else has a solution, let me know and I'll open a new question!
x_com, I'll give you the points for the effort (thank you, I don't mean to seem ungrateful). If anyone else has a solution, let me know and I'll open a new question!
From Javascript, use: document.FindElementById('
-Baan