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

Question

У меня есть три переключателя с одинаковым именем и разными значениями. Когда я нажимаю третий переключатель, флажок и текстовое поле отключаются. Но когда я выбираю другие два переключателя, он должен отображаться. Мне нужна помощь в 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>

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

  });

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

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

Answer 4

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

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

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

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

Answer 5

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

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

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

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

Answer 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

Answer 7

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

Answer 8

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

Answer 9

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

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

вы можете определить id для элементов управления, которые вы хотите изменить, и в 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); 

Answer 10

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

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

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

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

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

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