I'm facing an issue with an HTML form that includes two disabled checkboxes and an image with an onclick event intended to display a popup and enable the checkboxes:
<input id="chk1" type="checkbox" disabled="disabled" />
<input id="chk2" type="checkbox" disabled="disabled" />
<img src="..." onclick="window.open('...'); document.getElementById('chk1').disabled=false;document.getElementById('chk2').disabled=false" />
Unfortunately, this setup is not functioning as expected. Although the popup window appears, the checkboxes remain disabled.
In my attempts to resolve this, I have experimented with using removeAttribute("disabled") instead of disabled=false, but it did not yield any positive results. I also tried moving the window.open function to the end of the onclick event sequence, but this change did not make a difference either.
As jQuery is not currently being utilized in this project, I am unable to leverage its capabilities for potential solutions. Can anyone help me identify what may be causing this issue?
Update:
I should mention that the input tags are generated by ASP.NET. Further testing has revealed that there is a discrepancy between using <asp:CheckBox /> and
<input type="checkbox" runat="server" />disabled property in Internet Explorer (IE) and Firefox (FF).
While I initially assumed that both approaches would produce similar outputs, it seems that there is a distinction, although I haven't been able to pinpoint exactly where they differ. The provided code functions correctly in FF with HtmlInputCheckBox objects, but encounters issues in IE when using CheckBox objects from ASP.NET.
(It's worth noting that the calls to getElementById actually utilize the ASP.NET ClientID property for the respective elements.)
Hence, my current question revolves around understanding why the enable/disable functionality behaves differently in IE and FF depending on whether a HtmlInputCheckBox or CheckBox object is used.