Radiobutton Disable/Enable im IE schlägt fehl

[boozone]

Hallo Community,

schon einmal danke für eure Mühe, ich weiß das zu schätzen.

Ich habe ein Problem mit der Aktivierung und wahrscheinlich auch mit der Deaktivierung von Radiobuttons im Internet Explorer.

Ich habe mir so eine Art Toggle gebaut. Der Benutzer kann über eine Checkbox auswählen ob die standardmäßig deaktivieren Radiobuttons zugeschalteten werden sollen.

Im Firefox und anderen Browsern klappt das wunderbar. Nur im Internet Explorer funktioniert es nicht.

Ich hänge hier mal einen kleinen Screenshot an, der das Problem noch ein wenig besser darstellt.

http://imageshack.us/f/854/ierbproblem.png/

So und hier mein Code:

JavaScript:

          //-----------------------> Toogle für panel Steuerelemente (Beabeitungsgebuehr)
        function enableDisableBearbeitungsgebuehr(cbID, tbID, rbEinrechnen, rbSeperat) {

            if (document.getElementById(cbID).checked) {
                document.getElementById(tbID).disabled = false;
                document.getElementById(tbID).className += "left tbWertINPleft";
                document.getElementById(rbEinrechnen).disabled = false;
                document.getElementById(rbSeperat).disabled = false;
            }
            else {
                document.getElementById(tbID).value = "";
                document.getElementById(tbID).className += "left tbWertINPleftDisable";
                document.getElementById(tbID).disabled = true;

                document.getElementById(rbEinrechnen).disabled = true;
                document.getElementById(rbSeperat).disabled = true;
                document.getElementById("tabFehlerzeile").style.display = "none";
                document.getElementById("lblFehlerAllgemein").style.display = "none";
            }
        }

HTML:

                        <div id="HilfeTextBearbeitungs" class="hilfeTextGroßoff" style="z-index:2; position:relative;">
                            <table tabindex="2" style="height:72px;width:645px;" onblur="hilfeTextDeaktivierenGross('HilfeTextBearbeitungs');" onfocus="hilfeTextAktivierenGross('HilfeTextBearbeitungs', cbHilfetexteAktiv.checked);" cellspacing="0px" cellpadding="0px">
                                <tr>
                                    <td>
                                        <div class="tools_zeile">
                                            <span class="links pos_lhs lhs_w295px">
                                                <input runat="server" type="checkbox" id="cbBearbeitungsgebuehr" class="left" onblur="hilfeTextDeaktivierenGross('HilfeTextBearbeitungs');" onfocus="hilfeTextAktivierenGross('HilfeTextBearbeitungs', cbHilfetexteAktiv.checked);" onclick="enableDisableBearbeitungsgebuehr('cbBearbeitungsgebuehr', 'tbBearbeitungsgebuehr', 'rbBearbeitungsgebuehrEinrechnen', 'rbBearbeitungsgebuehrSeparat');" value="Enable/Disable" />
                                                Bearbeitungsgebühr 
                                            </span>
                                            <asp:TextBox Width="128px" ID="tbBearbeitungsgebuehr" runat="server" CssClass="links tbWertINPleftDisable" Style="margin-left:15px;"
                                                Enabled="false" onblur="this.value = calltbValidation(this.value, 0, 2, true, 'tbBearbeitungsgebuehr', 'HilfeTextBearbeitungs')" onfocus="hilfeTextAktivierenGross('HilfeTextBearbeitungs', cbHilfetexteAktiv.checked);"></asp:TextBox>
                                            <span class="pos_rhs">Euro</span>
                                            <div class="clear-l" style="height: 5px;">
                                            </div>
                                            <asp:RadioButton ID="rbBearbeitungsgebuehrEinrechnen" runat="server" Text="in die Rückzahlungsrate einrechnen"
                                                CssClass="rbleft" GroupName="Bearbeitungsgebuehr" Enabled="false" Checked="true" />
                                            <div class="clear-l">
                                            </div>
                                            <asp:RadioButton ID="rbBearbeitungsgebuehrSeparat" runat="server" Text="separat zu zahlen"
                                                CssClass="rbleft" GroupName="Bearbeitungsgebuehr" Enabled="false" />
                                        </div>
                                    </td>
                                </tr>
                            </table>
                        </div>

So ich hoffe mir kann hierbei jemand Helfen.

Danke schon mal und viele Grüße,
Danny

[Falk Prüfer]

Hallo,

irgendwie passen deine Codestücke nicht zusammen. Die Funktion "enableDisableSteuersatz" wird nirgendwo aufgerufen. Dafür sind in div. Event-Attributen Funktionsaufrufe enthalten, die in deinem Stückchen JS-Code nicht enthalten sind. Es ist also schwer zu sagen, was hier warum falsch läuft.

Gruß Falk

[boozone]

Hi Falk,

sorry ich hab die Falsche Funktion kopiert. Ich hab es oben Editiert und hier ist sie nochmal:

        //-----------------------> Toogle für panel Steuerelemente (Beabeitungsgebuehr)
        function enableDisableBearbeitungsgebuehr(cbID, tbID, rbEinrechnen, rbSeperat) {

            if (document.getElementById(cbID).checked) {
                document.getElementById(tbID).disabled = false;
                document.getElementById(tbID).className += "left tbWertINPleft";
                document.getElementById(rbEinrechnen).disabled = false;
                document.getElementById(rbSeperat).disabled = false;
            }
            else {
                document.getElementById(tbID).value = "";
                document.getElementById(tbID).className += "left tbWertINPleftDisable";
                document.getElementById(tbID).disabled = true;

                document.getElementById(rbEinrechnen).disabled = true;
                document.getElementById(rbSeperat).disabled = true;
                document.getElementById("tabFehlerzeile").style.display = "none";
                document.getElementById("lblFehlerAllgemein").style.display = "none";
            }
        }

Und welche Funktionen meintest du?

Alle anderen Funktionen, die z.b. von der Textbox aufgerufen werden machen keine Probleme bzw. haben keinen Einfluss auf die "Problem Funktion". Willst du sie trotzdem sehen?

[Falk Prüfer]

Hallo,

bekommst du denn irgednwelche JS-Fehlermeldungen? Ich kann es mit deinem Beispiel bei mir nicht nachvollziehen!
Wie sieht denn der endgültige (von ASP generierte) HTML-Code aus?
Der IE hat übrigens einen eingebauten JS-Debugger, da kannst du ja mal nachverfolgen was warum nicht geht.

Gruß Falk

[boozone]

Hi,

also ich bekomme keine JS Fehlermeldungen. Ich hab es jetzt auch mal im IE gedebuggt. Leider ist an der stelle nichts auffälliges.
Das Programm setzt beide Radiobuttons auf enable nur leider sind sie es nicht...

Der generierte HTML Code sieht so aus:

                        <div id="HilfeTextBearbeitungs" class="hilfeTextGroßoff" style="z-index:2; position:relative;">
                            <table tabindex="2" style="height:72px;width:645px;" onblur="hilfeTextDeaktivierenGross('HilfeTextBearbeitungs');" onfocus="hilfeTextAktivierenGross('HilfeTextBearbeitungs', cbHilfetexteAktiv.checked);" cellspacing="0px" cellpadding="0px">
                                <tr>
                                    <td>
                                        <div class="tools_zeile">
                                            <span class="links pos_lhs lhs_w295px">
                                                <input name="cbBearbeitungsgebuehr" type="checkbox" id="cbBearbeitungsgebuehr" class="left" onblur="hilfeTextDeaktivierenGross(&#39;HilfeTextBearbeitungs&#39;);" onfocus="hilfeTextAktivierenGross(&#39;HilfeTextBearbeitungs&#39;, cbHilfetexteAktiv.checked);" onclick="enableDisableBearbeitungsgebuehr(&#39;cbBearbeitungsgebuehr&#39;, &#39;tbBearbeitungsgebuehr&#39;, &#39;rbBearbeitungsgebuehrEinrechnen&#39;, &#39;rbBearbeitungsgebuehrSeparat&#39;);" value="Enable/Disable" />
                                                Bearbeitungsgebühr 
                                            </span>
                                            <input name="tbBearbeitungsgebuehr" type="text" id="tbBearbeitungsgebuehr" disabled="disabled" class="links tbWertINPleftDisable" onblur="this.value = calltbValidation(this.value, 0, 2, true, &#39;tbBearbeitungsgebuehr&#39;, &#39;HilfeTextBearbeitungs&#39;)" onfocus="hilfeTextAktivierenGross(&#39;HilfeTextBearbeitungs&#39;, cbHilfetexteAktiv.checked);" style="width:128px;margin-left:15px;" />
                                            <span class="pos_rhs">Euro</span>
                                            <div class="clear-l" style="height: 5px;">
                                            </div>
                                            <span disabled="disabled" class="rbleft"><input id="rbBearbeitungsgebuehrEinrechnen" type="radio" name="Bearbeitungsgebuehr" value="rbBearbeitungsgebuehrEinrechnen" checked="checked" disabled="disabled" /><label for="rbBearbeitungsgebuehrEinrechnen">in die Rückzahlungsrate einrechnen</label></span>
                                            <div class="clear-l">
                                            </div>
                                            <span disabled="disabled" class="rbleft"><input id="rbBearbeitungsgebuehrSeparat" type="radio" name="Bearbeitungsgebuehr" value="rbBearbeitungsgebuehrSeparat" disabled="disabled" /><label for="rbBearbeitungsgebuehrSeparat">separat zu zahlen</label></span>
                                        </div>
                                    </td>
                                </tr>
                            </table>
                        </div>

Noch irgendeine Idee? :/

[Falk Prüfer]

...Noch irgendeine Idee? :/

Nein, wie schon gesagt, wenn ich deinen Code soweit vereinfache, dass keine Fehler mehr auftreten, dann funktioniert es bei mir auch im IE.

Was bezweckst du übrigens mit der Zeile:
[highlight=javascript]
document.getElementById(tbID).className += "left tbWertINPleftDisable";
[/highlight]
bzw.
[highlight=javascript]
document.getElementById(tbID).className += "left tbWertINPleft";
[/highlight]
Das + fungiert dort als Verkettungsoperator und dein className wird immer Länger. Nach dem dritten Wechsel sieht der Inhalt von className so aus:

'left tbWertINPleftDisableleft tbWertINPleftleft tbWertINPleftDisable'

Das kann so nicht gewollt sein!?

Gruß Falk

[fanderlf]

Das kann auch einfach eine Browserinkompatibilität sein. Ich würde dringend zu einer Bibliothek raten. Je nachdem was Du machen willst, als Suchvorschläge mal JQuery, Knockout, AngularJS.