отключить текстовое поле с помощью jquery?

У меня есть три переключателя с одинаковым именем и разными значениями. Когда я нажимаю третий переключатель, флажок и текстовое поле будут отключены. Но когда я выбираю другие два переключателя, они должны отображаться. Мне нужна помощь в JQuery.Спасибо за заранее ....

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

  });

На самом деле это не обязательно, но небольшое улучшение кода okw, которое ускорит вызов функции (поскольку вы перемещаете условное выражение за пределы вызова функции).

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

Эта ветка устарела, но информацию следует обновить.

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

Чтобы получить и изменить свойства DOM, такие как отмеченное, выделенное или отключенное состояние элементов формы, используйте метод .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);
    }
  });
});

Я не уверен, почему некоторые из этих решений используют .each () - в этом нет необходимости.

Вот рабочий код, который отключается, если установлен третий флажок, в противном случае удаляет отключенный атрибут.

Примечание: я добавил идентификатор в флажок. Также помните, что идентификаторы должны быть уникальными в вашем документе, поэтому либо удалите идентификаторы на радиокнопках, либо сделайте их уникальными.

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

Я знаю, что отвечать на старый вопрос - плохая привычка, но я даю этот ответ людям, которые потом увидят этот вопрос.

Лучший способ изменить состояние в JQuery сейчас - через

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

Пожалуйста, проверьте эту ссылку для полной иллюстрации. Отключить / включить ввод с помощью jQuery?

Я бы сделал это немного иначе

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

Атрибут класса уведомления

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

Таким образом, если вам нужно добавить дополнительные переключатели, вам не нужно беспокоиться об изменении javascript

Я предполагаю, что вы, вероятно, захотите привязать событие «щелчок» к нескольким переключателям, прочитать значение переключенного переключателя и, в зависимости от значения, отключить / включить флажок или текстовое поле.

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

Извините за опоздание на вечеринку, но я вижу здесь некоторые возможности для улучшения. Не в отношении «отключить текстовое поле», а в отношении выбора радионаблюдения и упрощения кода, что делает его более надежным для будущих изменений.

Прежде всего, вы не должны использовать .each () и использовать индекс, чтобы указывать на конкретный переключатель. Если вы работаете с динамическим набором переключателей или если впоследствии вы добавляете или удаляете некоторые переключатели, то ваш код будет реагировать на неправильную кнопку!

Затем, но это, вероятно, не тот случай, когда был создан OP, я предпочитаю использовать .on ('click', function () {...}) вместо click ... http: //api.jquery. com / on /

Наконец, но не в последнюю очередь, код можно было бы сделать более простым и перспективным, выбрав переключатель на основе его имени (но это уже появилось в сообщении).

Итак, я получил следующий код.

HTML (на основе кода 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>

JS-код

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

MVC 4 @ Html.CheckBox Обычно люди хотят действовать при установке и снятии флажка mvc.

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

вы можете определить идентификатор для элементов управления, которые хотите изменить, и в javascript выполните следующие действия

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

вы также можете изменить свойство, например

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

получить значение радиокнопок и совпадает с каждым, если оно равно 3, то отключено 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>