tắt hộp văn bản bằng jquery?

Tôi có ba nút radio có cùng tên và các giá trị khác nhau. Khi tôi nhấp vào nút radio thứ ba, hộp kiểm và hộp văn bản sẽ bị tắt. Nhưng khi tôi chọn hai nút radio khác, nó phải hiển thị. Tôi cần trợ giúp trong Jquery. Cảm ơn bạn nâng cao....

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

  });

Không thực sự cần thiết, nhưng một cải tiến nhỏ đối với mã okw sẽ làm cho hàm gọi nhanh hơn (vì bạn đang di chuyển điều kiện ra bên ngoài lệnh gọi hàm).

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

Chủ đề này hơi cũ nhưng thông tin nên được cập nhật.

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

Để truy xuất và thay đổi các thuộc tính DOM, chẳng hạn như trạng thái đã chọn, đã chọn hoặc đã tắt của các phần tử biểu mẫu, hãy sử dụng phương thức .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);
    }
  });
});

Tôi không chắc tại sao một số giải pháp này lại sử dụng .each () - không cần thiết.

Đây là một số mã làm việc vô hiệu hóa nếu hộp kiểm thứ 3 được nhấp vào, nếu không sẽ xóa thuộc tính bị vô hiệu hóa.

Lưu ý: Tôi đã thêm một id vào hộp kiểm. Ngoài ra, hãy nhớ rằng id phải là duy nhất trong tài liệu của bạn, vì vậy hãy xóa id trên các nút radio hoặc làm cho chúng trở thành duy nhất

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

Tôi biết trả lời một câu hỏi cũ không phải là một thói quen tốt nhưng tôi đang đặt câu trả lời này cho những người sẽ xem câu hỏi sau đó.

Cách tốt nhất để thay đổi trạng thái trong JQuery bây giờ là thông qua

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

Vui lòng kiểm tra liên kết này để có hình minh họa đầy đủ. Tắt / bật đầu vào bằng jQuery?

Tôi sẽ làm nó hơi khác một chút

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

Thuộc tính lớp thông báo

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

Bằng cách này, nếu bạn cần thêm nhiều nút radio hơn, bạn không cần lo lắng về việc thay đổi javascript

Tôi đoán bạn có thể muốn liên kết sự kiện "nhấp chuột" với một số nút radio, đọc giá trị của nút radio được nhấp và tùy thuộc vào giá trị, tắt / bật hộp kiểm và hoặc hộp văn bản.

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

Xin lỗi vì đã đến bữa tiệc quá muộn, nhưng tôi thấy có một số điểm cần cải thiện ở đây. Không liên quan đến "vô hiệu hóa hộp văn bản", mà là lựa chọn hộp phóng xạ và đơn giản hóa mã, làm cho nó trở thành bằng chứng trong tương lai, cho các thay đổi sau này.

Trước hết, bạn không nên sử dụng .each () và sử dụng chỉ mục để chỉ ra một nút radio cụ thể. Nếu bạn làm việc với một tập hợp các nút radio động hoặc nếu bạn thêm hoặc xóa một số nút radio sau đó, thì mã của bạn sẽ phản ứng trên nút sai!

Tiếp theo, nhưng đó có lẽ không phải là trường hợp khi OP được tạo, tôi thích sử dụng .on ('click', function () {...}) thay vì nhấp vào ... http: //api.jquery. com / on /

Nhưng không kém phần quan trọng, mã có thể được thực hiện đơn giản hơn và bằng chứng trong tương lai bằng cách chọn nút radio dựa trên tên của nó (nhưng đã xuất hiện trong một bài đăng).

Vì vậy, tôi đã kết thúc với đoạn mã sau.

HTML (dựa trên mã 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>

Mã JS

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

MVC 4 @ Html.CheckBox: Nói chung, mọi người muốn thực hiện thao tác chọn và bỏ chọn hộp kiểm mvc.

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

bạn có thể xác định id cho các điều khiển bạn muốn thay đổi và trong javascript thực hiện theo

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

bạn cũng có thể thay đổi thuộc tính như

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

nhận giá trị các nút radio và khớp với từng nút nếu nó là 3 thì bị vô hiệu hóa 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>