jquery kullanarak metin kutusu devre dışı bırakılsın mı?

Aynı ada ve farklı değerlere sahip üç radyo düğmem var. Üçüncü radyo düğmesini tıkladığımda onay kutusu ve metin kutusu devre dışı bırakılacak, ancak diğer iki radyo düğmesini seçtiğimde gösterilmesi gerekiyor.Jquery'de yardıma ihtiyacım var. Teşekkürler ilerlemek....

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

  });

Gerçekten gerekli değil, ancak okw'nin kodunda işlevin daha hızlı çağrılmasını sağlayacak küçük bir iyileştirme (koşulu işlev çağrısının dışına taşıdığınız için).

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

Bu ileti dizisi biraz eski ancak bilgilerin güncellenmesi gerekiyor.

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

Form öğelerinin işaretli, seçili veya devre dışı bırakılmış durumu gibi DOM özelliklerini almak ve değiştirmek için .prop () yöntemini kullanın.

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

Bu çözümlerden bazılarının neden .each () kullandığından emin değilim - bu gerekli değil.

İşte 3. onay kutusu tıklandığında devre dışı bırakan, aksi takdirde devre dışı bırakılan özelliği kaldıran bazı çalışma kodları.

Not: Onay kutusuna bir kimlik ekledim. Ayrıca, kimliklerin belgenizde benzersiz olması gerektiğini unutmayın, bu nedenle radyo düğmelerindeki kimlikleri kaldırın veya onları benzersiz yapın

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

Eski bir soruyu cevaplamanın iyi bir alışkanlık olmadığını biliyorum ama bu cevabı daha sonra soruyu görecek insanlar için koyuyorum.

JQuery'deki durumu değiştirmenin en iyi yolu artık

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

Tam örnek için lütfen bu bağlantıyı kontrol edin. JQuery ile bir girişi devre dışı bırakmak / etkinleştirmek?

Ben biraz daha farklı yapardım

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

Sınıf özniteliğine dikkat edin

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

Bu şekilde, daha fazla radyo düğmesi eklemeniz gerekirse, javascript'i değiştirme konusunda endişelenmenize gerek kalmaz

Tahminimce bir "tıklama" olayını bir dizi radyo düğmesine bağlamak, tıklanan radyo düğmesinin değerini okumak ve değere bağlı olarak bir onay kutusunu ve / veya metin kutusunu devre dışı bırakmak / etkinleştirmek isteyeceksiniz.

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

Partiye bu kadar geç kaldığım için özür dilerim, ama burada biraz iyileştirme alanı görüyorum. "Metin kutusunu devre dışı bırakma" ile ilgili değil, radyon kutusu seçimi ve kod sadeleştirmesi ile ilgili, daha sonraki değişiklikler için biraz daha ileriye dönük hale getiriyor.

Her şeyden önce, .each () kullanmamalı ve belirli bir radyo düğmesini göstermek için dizini kullanmamalısınız. Dinamik bir radyo düğmeleri kümesiyle çalışırsanız veya daha sonra bazı radyo düğmeleri ekler veya kaldırırsanız, kodunuz yanlış düğmeye tepki verir!

Sonra, ama OP yapıldığında muhtemelen durum böyle değildi, ben http: //api.jquery öğesini click ... yerine .on ('click', function () {...}) kullanmayı tercih ederim. Hadi ama/

İlk olarak, ancak en önemlisi, kodun adına göre radyo düğmesi seçilerek daha basit ve ileride kanıtlanabilir (ancak bu zaten bir gönderide göründü).

Bu yüzden aşağıdaki kodu elde ettim.

HTML (okw koduna göre)

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

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

MVC 4 @ Html.CheckBoxFor genellikle insanlar mvc onay kutusunu işaretlemek ve işaretini kaldırmak isterler.

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

Değiştirmek istediğiniz kontroller için kimlik tanımlayabilirsiniz ve javascript'te aşağıdakileri yapın

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

özelliği de şu şekilde değiştirebilirsiniz:

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

radyo düğmeleri değerini alın ve 3 ise devre dışı bırakılmışsa her biriyle eşleşir 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>