BlaBla: uncheckable Radiobutton

Hallo!

In einem kleinem Projekt muss ich einige HTML-Formulare verarbeiten. So weit, so gut und eigentlich fertig.

Nun ist jemand auf die tolle Idee gekommen, dass es bei div. J/N Radiobuttons die Möglichkeit geben soll, diese wieder zurückzusetzen. Also auf keinen der beiden Werte. Grundsätzlich auch kein Problem, dachte ich zumindest.

Aber. Es müssen Radiobuttons sein. Keine Checkboxen. Es darf auch keinen dritten Werte geben wie z.B. J/N/X. Es sollen nicht alle betroffenen Radiobuttons zurückgesetzt werden sondern immer nur einer. Und es soll so funktionieren, dass man einen gecheckten Radiobutton anklickt und der dann wieder unchecked ist.

Mein bisher erfolgversprechendster Lösungsansatz mit jQuery sieht so auch:

  
    $('.uncheckable').mousedown(function()  {  
  
        if ($(this).prop('checked'))  
            $(this).prop('checked', false);  
        else  
            $(this).prop('checked', true);  
  
        alert('ok');  
    });  

Das funktioniert auch. Aber nur solange das testweise eingebaute alert nicht auskommentiert ist. Habe jetzt schon alles Mögliche probiert und komme auf keine grünen Zweig.

Vielleicht habt ihr ja für mich eine Idee oder sogar eine Lösung?

Danke!

  1. Liebe(r) BlaBla,

    lese ich da einen prinzipiellen Widerspruch?

    diese wieder zurückzusetzen. Also auf keinen der beiden Werte. [...]
    Es darf auch keinen dritten Werte geben wie z.B. J/N/X.

    Was bitte wird denn als Wert abgeschickt, wenn weder "Ja" noch "Nein" ausgewählt ist? Reden wir hier von einem rein kosmetischen Problem? Warum ist ein <select> mit genau zwei <option>-Elementen keine Möglichkeit?

    Es wird wohl Deine Aufgabe sein, den/die Verantwortlichen über diverse technische und Usability-bedingte Feinheiten aufzuklären... Keine schöne oder gar dankenswerte Aufgabe.

    Liebe Grüße,

    Felix Riesterer.

    --
    ie:% br:> fl:| va:) ls:[ fo:) rl:| n4:? de:> ss:| ch:? js:) mo:} zu:)
    1. Was bitte wird denn als Wert abgeschickt, wenn weder "Ja" noch "Nein" ausgewählt ist?

      Das kann ich ja beim Verabreiten der Daten z.B. mit empty() abfangen. Das ist aber eigentlich gar nicht das Problem.

      Es wird wohl Deine Aufgabe sein, den/die Verantwortlichen über diverse technische und Usability-bedingte Feinheiten aufzuklären... Keine schöne oder gar dankenswerte Aufgabe.

      Da hast du wahrlich Recht. Was aber soll ich machen. Es ist nämlich so: 'Das MUSS funktionieren'. Wie auch immer. Ich glaube mit dem Hinweis von ChrisB komme ich schon weiter.

      Beste Grüße und Danke!

      1. Liebe(r) BlaBla,

        ich fürchte, Du hast die Absicht hinter meiner Frage nicht verstanden.

        Was bitte wird denn als Wert abgeschickt, wenn weder "Ja" noch "Nein" ausgewählt ist?

        Das kann ich ja beim Verabreiten der Daten z.B. mit empty() abfangen.

        mir ging es nicht um die Logik des verarbeitenden Scripts, sondern die Logik hinter der Bedienungsweise. Wenn ein User keine Angaben macht, wieso sollte dann ein "Nein" verstanden werden? Wenn der User eine Angabe machen _muss_, dann sollte das Interface ihn auch dazu zwingen, z.B. indem eine der beiden Optionen schon ausgewählt ist.

        Alternativ könnte man auch eine einzelne Checkbox benutzen, die den Zustand "Ja" oder "nicht Ja, also Nein" darstellt. Auch hier wird der User gezwungen, eine eindeutige Angabe zu machen. Das sieht man z.B. bei "habe die AGB gelesen und stimme ihnen zu". Da gibt es kein undefiniert, da gibt es nur ja/nein.

        Liebe Grüße,

        Felix Riesterer.

        --
        ie:% br:> fl:| va:) ls:[ fo:) rl:| n4:? de:> ss:| ch:? js:) mo:} zu:)
        1. ich fürchte, Du hast die Absicht hinter meiner Frage nicht verstanden.

          Danke für deine Ausführungen. Diese sind mir durchaus verständlich.
          Ich kämpfe jedoch noch mit ein paar Beratungsresistenzen auf anderen Ebenen. Und wenn sich ein Radiobutton wie eine Checkbox verhalten soll oder eine Checkbox rund sein soll ist es nicht immer ganz einfach ;-)

          Schönen Abend noch!

          1. "Geht nicht" sagen hilft nix? Versuche zu erklären dass eine Webseite vom Browser angezeigt wird und sie demnach auch nur das kann was der Browser kann und tut.
            Wenn Radiobuttons für GENAU EINE Auswahl zuständig sind, kann man sie nicht für KEINE AUSWAHL verwenden. Das ist nunmal so, genauso wie man einem Auto auch keine Flügel wachsen lassen kann damit es fliegt.
            Mit der Idee wird der Benutzer verwirrt, da die Webseite sich nicht wie gewohnt verhält und somit einen seltsamen Eindruck macht, den der Kunde sicher nicht haben will.

            So ähnlich würde ich argumentieren so lange es geht, bevor ich irgendeinen Unsinn mache.

          2. Liebe(r) BlaBla,

            Und wenn sich ein Radiobutton wie eine Checkbox verhalten soll oder eine Checkbox rund sein soll ist es nicht immer ganz einfach ;-)

            dann nimm doch das passende Element und gestalte es um, damit auch Dein Auftraggeber zufrieden ist. Weitere Möglichkeiten:

            http://schinckel.net/2012/01/23/styling-radio-buttons-like-a-segmented-button/
            http://acidjs.wemakesites.net/custom-crossbrowser-styling-for-checkboxes-and-radio-buttons.html
            http://screwdefaultbuttons.com/
            http://slayeroffice.com/code/custom_checkbox/
            http://www.pseliger.de/testCases/customControls/customized-css-only-checkboxes-and-radiobuttons.html
            http://www.flog.co.nz/journal/arc-adams-radiocheckbox-customisation/

            Liebe Grüße,

            Felix Riesterer.

            --
            ie:% br:> fl:| va:) ls:[ fo:) rl:| n4:? de:> ss:| ch:? js:) mo:} zu:)
  2. Hi,

    Das funktioniert auch. Aber nur solange das testweise eingebaute alert nicht auskommentiert ist

    Vermutlich sorgt die von dir nicht unterbundene Default-Aktion des Klicks auf einen Radiobutton dafür, dass dann der andere wieder angekreuzt wird.

    Also probiere diese zu unterbinden: http://api.jquery.com/event.preventDefault/

    MfG ChrisB

    --
    RGB is totally confusing - I mean, at least #C0FFEE should be brown, right?
    1. Also probiere diese zu unterbinden: http://api.jquery.com/event.preventDefault/

      Genau das habe ich gesucht. Erste Tests schauen vielversprechend aus :-)
      Danke!