Отключить текстовое поле с помощью 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>

ОТВЕТЫ

Ответ 1

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

  });

Ответ 2

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

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

Ответ 3

Этот поток немного устарел, но информация должна быть обновлена.

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

Ответ 4

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

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

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

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

Ответ 5

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

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

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

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

Ответ 6

Я бы сделал это несколько иначе

 <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

Ответ 7

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

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

Ответ 8

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

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

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

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

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

HTML (на основе кода o.k.w)

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

Ответ 9

MVC 4 @Html.CheckBoxFor обычно люди хотят действия по проверке и снятию флажка 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);

Ответ 10

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