Textfeld mit jquery deaktivieren?

Ich habe drei Optionsfelder mit demselben Namen und unterschiedlichen Werten. Wenn ich auf das dritte Optionsfeld klicke, werden das Kontrollkästchen und das Textfeld deaktiviert. Wenn ich jedoch zwei andere Optionsfelder auswähle, müssen sie angezeigt werden. Ich benötige die Hilfe in Jquery. Danke voraus ....

<form name="checkuserradio">
    <input type="radio" value="1" name="userradiobtn" id="userradiobtn"/> 
    <input type="radio" value="2" name="userradiobtn" id="userradiobtn"/>
    <input type="radio" value="3" name="userradiobtn" id="userradiobtn"/>
    <input type="checkbox" value="4" name="chkbox" />
    <input type="text" name="usertxtbox" id="usertxtbox" />
</form>

HTML

<span id="radiobutt">
  <input type="radio" name="rad1" value="1" />
  <input type="radio" name="rad1" value="2" />
  <input type="radio" name="rad1" value="3" />
</span>
<div>
  <input type="text" id="textbox1" />
  <input type="checkbox" id="checkbox1" />
</div>

Javascript

  $("#radiobutt input[type=radio]").each(function(i){
    $(this).click(function () {
        if(i==2) { //3rd radiobutton
            $("#textbox1").attr("disabled", "disabled"); 
            $("#checkbox1").attr("disabled", "disabled"); 
        }
        else {
            $("#textbox1").removeAttr("disabled"); 
            $("#checkbox1").removeAttr("disabled"); 
        }
      });

  });

Nicht wirklich notwendig, aber eine kleine Verbesserung des Codes von okw, die den Funktionsaufruf beschleunigen würde (da Sie die Bedingung außerhalb des Funktionsaufrufs verschieben).

$("#radiobutt input[type=radio]").each(function(i) {
    if (i == 2) { //3rd radiobutton
        $(this).click(function () {
            $("#textbox1").attr("disabled", "disabled");
            $("#checkbox1").attr("disabled", "disabled");
        });
    } else {
        $(this).click(function () {
            $("#textbox1").removeAttr("disabled");
            $("#checkbox1").removeAttr("disabled");
        });
    }
});

Dieser Thread ist etwas alt, aber die Informationen sollten aktualisiert werden.

http://api.jquery.com/attr/

Verwenden Sie die Methode .prop (), um DOM-Eigenschaften wie den aktivierten, ausgewählten oder deaktivierten Status von Formularelementen abzurufen und zu ändern.

$("#radiobutt input[type=radio]").each(function(i){
$(this).click(function () {
    if(i==2) { //3rd radiobutton
        $("#textbox1").prop("disabled", true); 
        $("#checkbox1").prop("disabled", true); 
    }
    else {
        $("#textbox1").prop("disabled", false); 
        $("#checkbox1").prop("disabled", false);
    }
  });
});

Ich bin nicht sicher, warum einige dieser Lösungen .each () verwenden - es ist nicht notwendig.

Hier ist ein Arbeitscode, der deaktiviert wird, wenn das dritte Kontrollkästchen aktiviert wird. Andernfalls wird das deaktivierte Attribut entfernt.

Hinweis: Ich habe dem Kontrollkästchen eine ID hinzugefügt. Denken Sie auch daran, dass IDs in Ihrem Dokument eindeutig sein müssen. Entfernen Sie daher entweder die IDs auf den Radiobuttons oder machen Sie sie eindeutig

$("input:radio[name='userradiobtn']").click(function() {
    var isDisabled = $(this).is(":checked") && $(this).val() == "3";
    $("#chkbox").attr("disabled", isDisabled);
    $("#usertxtbox").attr("disabled", isDisabled);
});

Ich weiß, dass es keine gute Angewohnheit ist, eine alte Frage zu beantworten, aber ich gebe diese Antwort für Leute, die die Frage später sehen würden.

Der beste Weg, um den Status in JQuery zu ändern, ist jetzt durch

$("#input").prop('disabled', true); 
$("#input").prop('disabled', false);

Bitte überprüfen Sie diesen Link für eine vollständige Illustration. Eingabe mit jQuery deaktivieren / aktivieren?

Ich hätte es etwas anders gemacht

 <input type="radio" value="1" name="userradiobtn" id="userradiobtn" />   
 <input type="radio" value="2" name="userradiobtn" id="userradiobtn" />    
 <input type="radio" value="3" name="userradiobtn" id="userradiobtn" class="disablebox"/>   
 <input type="checkbox" value="4" name="chkbox" id="chkbox" class="showbox"/>    
 <input type="text" name="usertxtbox" id="usertxtbox" class="showbox" />   

Beachten Sie das Klassenattribut

 $(document).ready(function() {      
    $('.disablebox').click(function() {
        $('.showbox').attr("disabled", true);           
    });
});

Auf diese Weise müssen Sie sich keine Gedanken über das Ändern des Javascript machen, wenn Sie weitere Optionsfelder hinzufügen müssen

Ich vermute, Sie möchten wahrscheinlich ein "Klick" -Ereignis an eine Reihe von Optionsfeldern binden, den Wert des angeklickten Radiobuttons lesen und je nach Wert ein Kontrollkästchen und / oder ein Textfeld deaktivieren / aktivieren.

function enableInput(class){
    $('.' + class + ':input').attr('disabled', false);
}

function disableInput(class){
    $('.' + class + ':input').attr('disabled', true);
}

$(document).ready(function(){
    $(".changeBoxes").click(function(event){
        var value = $(this).val();
        if(value == 'x'){
            enableInput('foo'); //with class foo
            enableInput('bar'); //with class bar
        }else{
            disableInput('foo'); //with class foo
            disableInput('bar'); //with class bar
        }
    });
});

Es tut mir leid, dass ich so spät auf der Party bin, aber ich sehe hier Raum für Verbesserungen. Nicht in Bezug auf "Textbox deaktivieren", sondern in Bezug auf die Auswahl der Radionbox und die Vereinfachung des Codes, wodurch sie für spätere Änderungen etwas zukunftssicherer wird.

Zunächst sollten Sie nicht .each () verwenden und den Index verwenden, um auf ein bestimmtes Optionsfeld hinzuweisen. Wenn Sie mit einem dynamischen Satz von Optionsfeldern arbeiten oder anschließend einige Optionsfelder hinzufügen oder entfernen, reagiert Ihr Code auf das falsche Optionsfeld!

Als nächstes, aber das war wahrscheinlich nicht der Fall, als das OP erstellt wurde, bevorzuge ich .on ('click', function () {...}) anstelle von click ... http: //api.jquery. Komm schon/

Zu guter Letzt könnte auch der Code einfacher und zukunftssicherer gemacht werden, indem das Optionsfeld anhand seines Namens ausgewählt wird (der jedoch bereits in einem Beitrag enthalten ist).

Also habe ich den folgenden Code erhalten.

HTML (basierend auf dem Code von okw)

<span id="radiobutt">
    <input type="radio" name="rad1" value="1" />
    <input type="radio" name="rad1" value="2" />
    <input type="radio" name="rad1" value="3" />
</span>
<div>
    <input type="text" id="textbox1" />
    <input type="checkbox" id="checkbox1" />
</div>

JS-Code

$("[name='rad1']").on('click', function() {
    var disable = $(this).val() === "2";
    $("#textbox1").prop("disabled", disable); 
    $("#checkbox1").prop("disabled", disable); 
});

MVC 4 @ Html.CheckBoxFür im Allgemeinen möchten Benutzer beim Aktivieren und Deaktivieren des Kontrollkästchens mvc Maßnahmen ergreifen.

<div class="editor-field">
    @Html.CheckBoxFor(model => model.IsAll, new { id = "cbAllEmp" })
</div>

Sie können die ID für die Steuerelemente definieren, die Sie ändern möchten, und in Javascript die folgenden Schritte ausführen

<script type="text/javascript">
    $(function () {
        $("#cbAllEmp").click("", function () {
            if ($("#cbAllEmp").prop("checked") == true) {
                    $("#txtEmpId").hide();
                    $("#lblEmpId").hide();
                }
                else {
                    $("#txtEmpId").show();
                    $("#txtEmpId").val("");
                    $("#lblEmpId").show();
             }
        });
    });

Sie können die Eigenschaft auch wie ändern

$("#txtEmpId").prop("disabled", true); 
$("#txtEmpId").prop("readonly", true); 

$(document).ready(function () {
   $("#txt1").attr("onfocus", "blur()");
});

$(document).ready(function () {
  $("#txt1").attr("onfocus", "blur()");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<input id="txt1">

Ermitteln Sie den Wert der Optionsfelder und stimmen Sie mit jedem überein, wenn er 3 ist, und deaktivieren Sie ihn dann checkbox and textbox.

$("#radiobutt input[type=radio]").click(function () {
    $(this).each(function(index){
    //console.log($(this).val());
        if($(this).val()==3) { //get radio buttons value and matched if 3 then disabled.
            $("#textbox_field").attr("disabled", "disabled"); 
            $("#checkbox_field").attr("disabled", "disabled"); 
        }
        else {
            $("#textbox_field").removeAttr("disabled"); 
            $("#checkbox_field").removeAttr("disabled"); 
        }
      });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<span id="radiobutt">
  <input type="radio" name="groupname" value="1" />
  <input type="radio" name="groupname" value="2" />
  <input type="radio" name="groupname" value="3" />
</span>
<div>
  <input type="text" id="textbox_field" />
  <input type="checkbox" id="checkbox_field" />
</div>