nonaktifkan kotak teks menggunakan jquery?

Saya memiliki tiga tombol radio dengan nama yang sama dan nilai yang berbeda, ketika saya mengklik tombol radio ketiga, kotak centang dan kotak teks akan dinonaktifkan, tetapi ketika saya memilih dua tombol radio lainnya, itu harus ditampilkan. Saya butuh bantuan di Jquery. muka....

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

  });

Tidak terlalu diperlukan, tetapi sedikit perbaikan pada kode okw yang akan membuat pemanggilan fungsi lebih cepat (karena Anda memindahkan kondisional di luar pemanggilan fungsi).

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

Utas ini agak tua tetapi informasinya harus diperbarui.

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

Untuk mengambil dan mengubah properti DOM seperti status elemen formulir yang diperiksa, dipilih, atau dinonaktifkan, gunakan metode .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);
    }
  });
});

Saya tidak yakin mengapa beberapa solusi ini menggunakan .each () - itu tidak perlu.

Berikut adalah beberapa kode yang berfungsi yang menonaktifkan jika kotak centang ke-3 diklik, jika tidak, hapus atribut yang dinonaktifkan.

Catatan: Saya menambahkan id ke kotak centang. Juga, ingat bahwa id harus unik di dokumen Anda, jadi hapus id pada radiobuttons, atau buat unik

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

Saya tahu ini bukan kebiasaan yang baik untuk menjawab pertanyaan lama tetapi saya memberikan jawaban ini untuk orang-orang yang akan melihat pertanyaan itu setelahnya.

Cara terbaik untuk mengubah status di JQuery sekarang adalah melalui

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

Silakan periksa tautan ini untuk ilustrasi lengkap. Nonaktifkan / aktifkan input dengan jQuery?

Saya akan melakukannya sedikit berbeda

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

Perhatikan atribut kelas

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

Dengan cara ini jika Anda perlu menambahkan lebih banyak tombol radio, Anda tidak perlu khawatir tentang mengubah javascript

Saya menduga Anda mungkin ingin mengikat acara "klik" ke sejumlah tombol radio, membaca nilai dari tombol radio yang diklik dan tergantung pada nilainya, nonaktifkan / aktifkan kotak centang dan atau kotak teks.

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

Maaf karena terlambat datang ke pesta, tapi saya melihat ada ruang untuk perbaikan di sini. Bukan tentang "nonaktifkan kotak teks", tetapi tentang pemilihan kotak radio dan penyederhanaan kode, membuatnya menjadi bukti masa depan yang lebih baik, untuk perubahan selanjutnya.

Pertama-tama, Anda tidak boleh menggunakan .each () dan menggunakan indeks untuk menunjukkan tombol radio tertentu. Jika Anda bekerja dengan serangkaian tombol radio yang dinamis atau jika Anda menambah atau menghapus beberapa tombol radio setelahnya, kode Anda akan bereaksi pada tombol yang salah!

Selanjutnya, tetapi itu tidak mungkin terjadi ketika OP dibuat, saya lebih suka menggunakan .on ('click', function () {...}) daripada click ... http: //api.jquery. com / on /

Lst but not least, juga kode dapat dibuat lebih sederhana dan bukti masa depan dengan memilih tombol radio berdasarkan namanya (tapi itu sudah muncul di posting).

Jadi saya berakhir dengan kode berikut.

HTML (berdasarkan kode 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>

Kode JS

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

MVC 4 @ Html.CheckBoxUntuk umumnya orang ingin beraksi di centang dan hapus centang dari mvc checkbox.

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

Anda dapat menentukan id untuk kontrol yang ingin Anda ubah dan di javascript lakukan hal berikut

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

Anda juga dapat mengubah properti seperti

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

mendapatkan nilai tombol radio dan cocok dengan masing-masing jika 3 maka dinonaktifkan 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>