wyłączyć pole tekstowe za pomocą jQuery?

Mam trzy przyciski radiowe o tej samej nazwie i różnych wartościach.Kiedy kliknę trzeci przycisk opcji, pole wyboru i pole tekstowe zostaną wyłączone. Ale kiedy wybiorę pozostałe dwa przyciski opcji, muszą być pokazane.Potrzebuję pomocy w Jquery.Dzięki postęp....

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

  });

Niezbyt konieczne, ale małe ulepszenie kodu okw, które przyspieszyłoby wywołanie funkcji (ponieważ przenosisz warunek poza wywołanie funkcji).

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

Ten wątek jest trochę stary, ale informacje powinny zostać zaktualizowane.

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

Aby pobrać i zmienić właściwości DOM, takie jak zaznaczony, zaznaczony lub wyłączony stan elementów formularza, użyj metody .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);
    }
  });
});

Nie jestem pewien, dlaczego niektóre z tych rozwiązań używają .each () - nie jest to konieczne.

Oto działający kod, który wyłącza się po kliknięciu trzeciego pola wyboru, w przeciwnym razie usuwa wyłączony atrybut.

Uwaga: dodałem identyfikator do pola wyboru. Pamiętaj też, że identyfikatory muszą być unikalne w dokumencie, więc usuń identyfikatory z przycisków radiowych lub nadaj im niepowtarzalny charakter

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

Wiem, że nie jest dobrym nawykiem odpowiadanie na stare pytanie, ale daję tę odpowiedź osobom, które później zobaczyłyby to pytanie.

Najlepszy sposób na zmianę stanu w JQuery jest teraz zakończony

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

Sprawdź ten link, aby uzyskać pełną ilustrację. Wyłączyć / włączyć wejście za pomocą jQuery?

Zrobiłbym to nieco inaczej

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

Atrybut klasy uwagi

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

W ten sposób, jeśli będziesz musiał dodać więcej przycisków opcji, nie musisz się martwić o zmianę javascript

Domyślam się, że prawdopodobnie chcesz powiązać zdarzenie „kliknięcia” z kilkoma przyciskami radiowymi, odczytać wartość klikniętego radiobutton iw zależności od wartości, wyłączyć / włączyć pole wyboru i / lub pole tekstowe.

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

Przepraszam, że spóźniłem się na przyjęcie, ale widzę tutaj miejsce na poprawę. Nie chodzi o „wyłączenie pola tekstowego”, ale o wybór radionboxa i uproszczenie kodu, co czyni go nieco bardziej odpornym na przyszłość, do późniejszych zmian.

Przede wszystkim nie powinieneś używać .each () i używać indeksu do wskazywania konkretnego przycisku opcji. Jeśli pracujesz z dynamicznym zestawem przycisków opcji lub jeśli później dodasz lub usuniesz niektóre przyciski opcji, Twój kod zareaguje na niewłaściwy przycisk!

Następnie, ale prawdopodobnie tak nie było, gdy tworzono OP, wolę używać .on ('click', function () {...}) zamiast click ... http: //api.jquery. com / on /

Co nie mniej ważne, kod można by uczynić prostszym i przyszłym, wybierając przycisk radiowy oparty na jego nazwie (ale pojawił się już w poście).

Więc skończyłem z następującym kodem.

HTML (oparty na kodzie 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>

Kod JS

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

MVC 4 @ Html.CheckBox Na ogół ludzie chcą działać po zaznaczeniu i usunięciu zaznaczenia pola wyboru mvc.

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

możesz zdefiniować identyfikator kontrolek, które chcesz zmienić, aw javascript wykonaj następujące czynności

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

możesz również zmienić właściwość, np

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

pobierz wartość przycisków radiowych i dopasowuje do każdego, jeśli jest 3, a następnie wyłącza 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>