disabilitare la casella di testo usando jquery?

Ho tre pulsanti di opzione con lo stesso nome e valori diversi.Quando faccio clic sul terzo pulsante di opzione, la casella di controllo e la casella di testo saranno disabilitate.Ma quando scelgo altri due pulsanti di opzione deve essere visualizzato.Ho bisogno dell'aiuto in Jquery.Grazie in progredire....

<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"); 
        }
      });

  });

Non proprio necessario, ma un piccolo miglioramento al codice okw che renderebbe la chiamata di funzione più veloce (dato che stai spostando il condizionale al di fuori della chiamata di funzione).

$("#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");
        });
    }
});

Questo thread è un po 'vecchio ma le informazioni dovrebbero essere aggiornate.

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

Per recuperare e modificare le proprietà DOM come lo stato selezionato, selezionato o disabilitato degli elementi del modulo, utilizzare il metodo .prop ().

$("#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);
    }
  });
});

Non sono sicuro del motivo per cui alcune di queste soluzioni utilizzano .each () - non è necessario.

Ecco un po 'di codice funzionante che disabilita se si fa clic sulla terza casella di controllo, altrimenti rimuove l'attributo disabilitato.

Nota: ho aggiunto un ID alla casella di controllo. Inoltre, ricorda che gli ID devono essere univoci nel tuo documento, quindi rimuovi gli ID sui pulsanti radio o rendili unici

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

So che non è una buona abitudine rispondere a una vecchia domanda, ma sto mettendo questa risposta per le persone che vedrebbero la domanda in seguito.

Il modo migliore per cambiare lo stato in JQuery ora è attraverso

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

Si prega di controllare questo collegamento per l'illustrazione completa. Disabilitare / abilitare un input con jQuery?

L'avrei fatto leggermente diverso

 <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" />   

Nota l'attributo di classe

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

In questo modo, se dovessi aggiungere più pulsanti di opzione, non dovrai preoccuparti di modificare il javascript

Immagino che probabilmente desideri associare un evento "clic" a un numero di pulsanti di opzione, leggere il valore del pulsante di opzione selezionato e, a seconda del valore, disabilitare / abilitare una casella di controllo e / o una casella di testo.

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
        }
    });
});

Scusa per il ritardo alla festa, ma vedo margini di miglioramento qui. Non riguarda la "disabilitazione della casella di testo", ma la selezione di radionbox e la semplificazione del codice, rendendolo un po 'più a prova di futuro, per modifiche successive.

Prima di tutto, non dovresti usare .each () e usare l'indice per indicare un pulsante di opzione specifico. Se lavori con un set dinamico di pulsanti di opzione o se aggiungi o rimuovi alcuni pulsanti di opzione in seguito, il tuo codice reagirà al pulsante sbagliato!

Successivamente, ma probabilmente non era così quando è stato creato l'OP, preferisco usare .on ('click', function () {...}) invece di fare clic ... http: //api.jquery. com / su /

Inoltre, ma non meno importante, anche il codice potrebbe essere reso più semplice ea prova di futuro selezionando il pulsante di opzione in base al suo nome (ma che è già apparso in un post).

Quindi ho finito con il seguente codice.

HTML (basato sul codice di 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.CheckBox Per generalmente le persone vogliono agire selezionando e deselezionando la casella di controllo mvc.

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

puoi definire l'id per i controlli che vuoi cambiare e in javascript fare quanto segue

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

puoi anche modificare la proprietà come

$("#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">

ottiene il valore dei pulsanti di opzione e corrisponde a ciascuno se è 3, quindi disabilitato 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>