Textbox uitschakelen met jQuery?

Ik heb drie radioetsen met dezelfde naam en verschillende waarden.Wanneer ik op de knop Derde RADIO klik, wordt het selectievakje en het tekstvak uitgeschakeld. Maar wanneer ik kies op andere twee keuzeknoppen die het moet zijn. Ik heb de hulp in jQuery nodig. . Bedankt van tevoren ….

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

Antwoord 1, Autoriteit 100%

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

Antwoord 2, Autoriteit 12%

Niet echt nodig, maar een kleine verbetering van de code van O.K.W. die de functie sneller zou maken (aangezien u de voorwaardelijke buiten de functie belt).

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

Antwoord 3, Autoriteit 11%

Deze draad is een beetje oud, maar de informatie moet worden bijgewerkt.

http://api.jQuery.com/attr/

Om Dom-eigenschappen op te halen en te wijzigen, zoals de gecontroleerde, geselecteerde,
of gehandicapte toestand van vormelementen, gebruik de .PROP () -methode.

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

Antwoord 4, Autoriteit 5%

Ik weet niet zeker waarom sommige van deze oplossingen. ijk () – het is niet nodig.

Hier is een werkcode die het uitschakelt als het selectievakje 3e 3e wordt aangekoppeld, anders wordt het kenmerk gehandicapt gehandicapt.

Opmerking: ik heb een ID aan het selectievakje toegevoegd. Onthoud ook dat ID’s uniek moeten zijn in uw document, dus verwijder de ID’s op de radiobuttons of maak ze uniek

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

Antwoord 5, Autoriteit 4%

Ik weet dat het niet een goede gewoonte om een ​​oude vraag, maar ik ben om dit antwoord voor mensen die de vraag daarna zou zien te beantwoorden.

De beste manier om de status in JQuery nu te wijzigen, is via

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

Controleer deze link voor een volledige illustratie.
Invoer met jQuery in-/uitschakelen?

Antwoord 6

Ik zou het iets anders hebben gedaan

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

Klaskenmerk opmerken

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

Als u op deze manier meer keuzerondjes moet toevoegen, hoeft u zich geen zorgen te maken over het wijzigen van het javascript

Antwoord 7

Ik vermoed dat je waarschijnlijk een ‘klik’-gebeurtenis aan een aantal keuzerondjes wilt binden, de waarde van het aangeklikte keuzerondje wilt lezen en, afhankelijk van de waarde, een selectievakje en/of tekstvak wilt in-/uitschakelen.

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

Antwoord 8

Sorry dat ik zo laat op het feest was, maar ik zie hier ruimte voor verbetering. Niet over “tekstvak uitschakelen”, maar over de radionbox-selectie en codevereenvoudiging, waardoor het een beetje meer toekomstbestendig is, voor latere wijzigingen.

Allereerst moet je .each() niet gebruiken en de index gebruiken om een ​​specifiek keuzerondje aan te duiden. Als je met een dynamische set keuzerondjes werkt of als je achteraf nog wat keuzerondjes toevoegt of verwijdert, dan reageert je code op de verkeerde knop!

Vervolgens, maar dat was waarschijnlijk niet het geval toen de OP werd gemaakt, gebruik ik liever .on(‘click’, function(){…}) in plaats van click…
http://api.jquery.com/on/

Lst but not least, de code zou ook eenvoudiger en toekomstbestendiger kunnen worden gemaakt door het keuzerondje te selecteren op basis van de naam (maar die verscheen al in een bericht).

Dus ik eindigde met de volgende code.

HTML (gebaseerd op de code van o.k.w)

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

Antwoord 9

MVC 4 @Html.CheckBoxFor over het algemeen willen mensen actie ondernemen bij het in- en uitschakelen van het mvc-aanvinkvakje.

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

u kunt een id definiëren voor de besturingselementen die u wilt wijzigen en doe in javascript het volgende

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

u kunt de eigenschap ook wijzigen zoals

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

Antwoord 10

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

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