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

11 ответов:

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

  });

на самом деле не обязательно, но небольшое улучшение кода 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");
        });
    }
});

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

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

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

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

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

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

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

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

Я предполагаю, что вы, вероятно, хотите привязать событие "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
        }
    });
});

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

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

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

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

Так что я закончил со следующим кодом.

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>

JS-код

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

MVC 4 @Html.CheckBoxFor как правило, люди хотят действий на Проверить и снимите флажок в 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); 
$(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>

Comments

    Ничего не найдено.