Wie deaktiviere ich ein Optionsfeld?


482

Ich habe eine Gruppe von Optionsfeldern, die ich deaktivieren möchte, nachdem ein AJAX-Formular mit jQuery gesendet wurde. Ich habe folgende Funktion:

function clearForm(){
  $('#frm input[type="text"]').each(function(){
      $(this).val("");  
  });
  $('#frm input[type="radio":checked]').each(function(){
      $(this).checked = false;  
  });
 }

Mit Hilfe dieser Funktion kann ich die Werte in den Textfeldern löschen, aber ich kann die Werte der Optionsfelder nicht löschen.

Übrigens habe ich es auch versucht, $(this).val("");aber das hat nicht funktioniert.


3
Sie würden nicht jede Funktion benötigen. Sie können einfach die gewünschte Funktion für das jQuery-Objekt aufrufen. Siehe meine Antwort unten
James Wiseman

1
keine Notwendigkeit für jede () Funktion .. jQuery ("Eingabe: Radio"). removeAttr ("markiert");
Jitendra Damor

Antworten:


737

entweder (plain js)

this.checked = false;

oder (jQuery)

$(this).prop('checked', false);
// Note that the pre-jQuery 1.6 idiom was
// $(this).attr('checked', false);

Siehe jQuery prop () Hilfeseite für eine Erklärung auf der Differenz zwischen attr () und Stütze () und warum Stütze () ist nun vorzuziehen.
prop () wurde im Mai 2011 mit jQuery 1.6 eingeführt.


29
PPL, sei dir bewusst, dass sich sein Verhalten am 1.6 zugunsten von ändert prop(), während .attr()es auf die tatsächlichen Attribute beschränkt sein wird
Fabiano Soriani

Also ist es am besten, hier einfaches JS zu verwenden?
Doug Molineux

14
@Pete: Ich würde sagen, wenn Sie ein auf jQuery aufgebautes System haben, besteht der zusätzliche Vorteil darin, dass Sie die Browserunterstützung an die Bibliothek delegieren können, wenn es jemals einen Browser gibt, der dies anders handhabt. Wenn Ihre Software derzeit jedoch nicht jQuery verwendet, lohnt es sich nicht, die Bibliothek nur dafür einzuschließen.
David Hedlund

@ David Hedlund: Ich nehme an, Sie implizieren, dass alle gängigen Browser dies genauso behandeln wie heute, oder?
Shawn

2
@qris: Dein Problem ist wahrscheinlich woanders. Einfache Demo mit jQuery 1.9 . Sicher funktioniert in meinem Chrome.
David Hedlund

88

Sie würden die eachFunktion nicht brauchen

$("input:radio").attr("checked", false);

Oder

$("input:radio").removeAttr("checked");

Gleiches sollte auch für Ihr Textfeld gelten:

$('#frm input[type="text"]').val("");

Aber Sie könnten dies verbessern

$('#frm input:text').val("");

2
.removeAttr kann Probleme verursachen.
Kzqai

Möchten Sie erweitern, wie? Oder einen Link bereitstellen?
James Wiseman

Ja, Kzqai, ich bin auch neugierig, dass meine Antwort auch dafür abgelehnt wurde. In der Dokumentation wird kein Risiko erwähnt.
cjstehno

1
Relevante Dokumentation befindet sich tatsächlich in der .prop () -Methode: api.jquery.com/prop Quote "Eigenschaften wirken sich im Allgemeinen auf den dynamischen Status eines DOM-Elements aus, ohne das serialisierte HTML-Attribut zu ändern. Beispiele sind die value-Eigenschaft von Eingabeelementen und die Eigenschaft disabled Die Eingabe .prop () sollte verwendet werden, um deaktiviert und aktiviert zu setzen, anstelle der Methode .attr (). Die Methode .val () sollte zum Abrufen und Festlegen des Werts verwendet werden. Die Methode .val () sollte verwendet werden . " Dies bedeutet, dass ...
Kzqai

1
... Dies bedeutet, dass .attr () eine andere zugrunde liegende Quelle als .prop () ändert, das serialisierte HTML-Attribut anstelle des DOM, und obwohl dies jetzt möglicherweise kompatibel ist (z. B. kann jQuery 1.9 beide ändern, wenn .attr () verwendet wird), das ist keine Garantie dafür, dass beide in Zukunft geändert werden, wenn .prop () kanonisch ist. Zum Beispiel, wenn Sie .attr verwenden ('geprüft', falsch); und eine Bibliothek, die Sie verwenden, enthält .prop ('geprüft', wahr); es wird einen inhärenten Konflikt geben, der lästige Fehler verursachen kann.
Kzqai

29

Versuchen

$(this).removeAttr('checked')

Da viele Browser 'checked = irgendetwas' als wahr interpretieren. Dadurch wird das aktivierte Attribut vollständig entfernt.

Hoffe das hilft.


Wie in einer der anderen Antworten erwähnt, benötigen Sie nicht jede Funktion. Sie können den removeAttr-Aufruf einfach mit dem Selektor verketten.
cjstehno

6
HINWEIS: Diese Antwort stammt aus dem Jahr 2010. Zu diesem Zeitpunkt war dies ein gültiger und akzeptierter Ansatz. Seitdem ist es veraltet.
cjstehno

21

Leichte Modifikation von Laurynas 'Plugin basierend auf Igor's Code. Dies berücksichtigt mögliche Beschriftungen, die mit den Zielknöpfen verknüpft sind:

(function ($) {
    $.fn.uncheckableRadio = function () {

        return this.each(function () {
            var radio = this;
                $('label[for="' + radio.id + '"]').add(radio).mousedown(function () {
                    $(radio).data('wasChecked', radio.checked);
                });

                $('label[for="' + radio.id + '"]').add(radio).click(function () {
                    if ($(radio).data('wasChecked'))
                        radio.checked = false;
                });
           });
    };
})(jQuery);

1
Es hängt davon ab, wie die Beschriftungen verwendet werden. Wenn sie IDs verwenden, funktioniert dieser Code. Wenn das Optionsfeld in der Beschriftung verschachtelt ist, funktioniert dies nicht. Sie können diese noch erweiterte Version verwenden: gist.github.com/eikes/9484101
eikes

20

Danke Patrick, du hast meinen Tag gemacht! Es ist Mousedown, das Sie verwenden müssen. Ich habe den Code jedoch verbessert, damit Sie mit einer Gruppe von Optionsfeldern umgehen können.

//We need to bind click handler as well
//as FF sets button checked after mousedown, but before click
$('input:radio').bind('click mousedown', (function() {
    //Capture radio button status within its handler scope,
    //so we do not use any global vars and every radio button keeps its own status.
    //This required to uncheck them later.
    //We need to store status separately as browser updates checked status before click handler called,
    //so radio button will always be checked.
    var isChecked;

    return function(event) {
        //console.log(event.type + ": " + this.checked);

        if(event.type == 'click') {
            //console.log(isChecked);

            if(isChecked) {
                //Uncheck and update status
                isChecked = this.checked = false;
            } else {
                //Update status
                //Browser will check the button by itself
                isChecked = true;

                //Do something else if radio button selected
                /*
                if(this.value == 'somevalue') {
                    doSomething();
                } else {
                    doSomethingElse();
                }
                */
            }
    } else {
        //Get the right status before browser sets it
        //We need to use onmousedown event here, as it is the only cross-browser compatible event for radio buttons
        isChecked = this.checked;
    }
}})());

17

Schreiben Sie den Code von Igor als Plugin um.

Verwenden:

$('input[type=radio]').uncheckableRadio();

Plugin:

(function( $ ){

    $.fn.uncheckableRadio = function() {

        return this.each(function() {
            $(this).mousedown(function() {
                $(this).data('wasChecked', this.checked);
            });

            $(this).click(function() {
                if ($(this).data('wasChecked'))
                    this.checked = false;
            });
        });

    };

})( jQuery );

Das Abwählen funktioniert nicht, wenn ich auf das Etikett klicke. Während es also möglich ist, ein Radio durch Klicken auf das Etikett auszuwählen, funktioniert die Deaktivierung nur durch Klicken auf das Optionsfeld.
Simon Hürlimann

@ alkos333 hat eine Lösung, die auch mit Labels zu funktionieren scheint.
Simon Hürlimann

Es hängt davon ab, wie die Etiketten verwendet werden. Wenn sie IDs verwenden, funktioniert der @ alkos333-Code. Wenn das Optionsfeld im Etikett verschachtelt ist, verwenden Sie diese Version: gist.github.com/eikes/9484101
eikes

16

Für Radio und Radiogruppe:

$(document).ready(function() {
    $(document).find("input:checked[type='radio']").addClass('bounce');   
    $("input[type='radio']").click(function() {
        $(this).prop('checked', false);
        $(this).toggleClass('bounce');

        if( $(this).hasClass('bounce') ) {
            $(this).prop('checked', true);
            $(document).find("input:not(:checked)[type='radio']").removeClass('bounce');
        }
    });
});

14

Versuchen Sie dies, dies wird den Trick tun:

        $(document).ready(function() {
           $("input[type='radio']").mousedown(function(e) {
                if ($(this).attr("checked") == true) {
                   setTimeout("$('input[id=" + $(this).attr('id') + "]').removeAttr('checked');", 200);}
                else {
                    return true
                }
            });
        });

10

Versuchen

$(this).attr("checked" , false );

9

Sie können das Radiobutton-Verhalten auch nur mit Kontrollkästchen simulieren:

<input type="checkbox" class="fakeRadio" checked />
<input type="checkbox" class="fakeRadio" />
<input type="checkbox" class="fakeRadio" />

Dann können Sie diesen einfachen Code verwenden, um für Sie zu arbeiten:

$(".fakeRadio").click(function(){
    $(".fakeRadio").prop( "checked", false );
    $(this).prop( "checked", true );
});

Es funktioniert einwandfrei und Sie haben mehr Kontrolle über das Verhalten jeder Schaltfläche.

Sie können es selbst versuchen unter: http://jsfiddle.net/almircampos/n1zvrs0c/

Mit dieser Gabel können Sie auch alle abwählen, wie in einem Kommentar gefordert: http://jsfiddle.net/5ry8n4f4/


Dies ist großartig, außer dass Sie nicht alle Kontrollkästchen deaktivieren können.
Stefan

6

Geben Sie einfach den folgenden Code für jQuery ein:

jQuery("input:radio").removeAttr("checked");

Und für Javascript:

$("input:radio").removeAttr("checked");

Es ist nicht erforderlich, eine foreach-Schleife, .each () -Fubktion oder etwas anderes zu platzieren


5

Benutze das

$("input[name='nameOfYourRadioButton']").attr("checked", false);

4
$('#frm input[type="radio":checked]').each(function(){
   $(this).checked = false;  
  });

Das ist fast gut, aber du hast die [0] verpasst.

Richtig - >> $(this)[0].checked = false;


1
oder einfach:this.checked = false;
Eikes

4

Mit dieser JQuery können Sie den Radiobutton deaktivieren

$('input:radio[name="IntroducerType"]').removeAttr('checked');
                $('input:radio[name="IntroducerType"]').prop('checked', false);

1
function setRadio(obj) 
{
    if($("input[name='r_"+obj.value+"']").val() == 0 ){
      obj.checked = true
     $("input[name='r_"+obj.value+"']").val(1);
    }else{
      obj.checked = false;
      $("input[name='r_"+obj.value+"']").val(0);
    }

}

<input type="radio" id="planoT" name="planoT[{ID_PLANO}]" value="{ID_PLANO}" onclick="setRadio(this)" > <input type="hidden" id="r_{ID_PLANO}" name="r_{ID_PLANO}" value="0" >

: D.


-2
$('input[id^="rad"]').dblclick(function(){
    var nombre = $(this).attr('id');
    var checked =  $(this).is(":checked") ;
    if(checked){
        $("input[id="+nombre+"]:radio").prop( "checked", false );
    }
});

Jedes Mal, wenn Sie in einem aktivierten Radio einen Doppelklick ausführen, ändert sich das Kontrollkästchen in false

Meine Radios beginnen mit, id=radxxxxxxxxweil ich diesen ID-Selektor verwende.


3
Bitte schreiben Sie die Antwort in (verständlichem) Englisch.
Ericbn

@ericbn was ist, wenn jemand kein Englisch kann?
AlphaMale

@AlphaMale Englisch ist die offizielle Sprache auf dieser Seite.
Cristik

@Cristik Nicht alle Programmierer kommen aus "englischsprachigen" Ländern. Bedeutet das, dass sie nicht in diesem Forum posten können? Zweitens ist es 2 Jahre alt gewesen. Danke, dass du mich aufgeklärt hast.
AlphaMale

-2
function clearForm(){
  $('#frm input[type="text"]').each(function(){
      $(this).val("");  
  });
  $('#frm input[type="radio":checked]').each(function(){
      $(this).attr('checked', false);  
  });
 }

Der richtige Selektor ist: #frm input[type="radio"]:checked nicht#frm input[type="radio":checked]

Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.