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

104

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

Ответы:

209

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

  });
— хорошо
источник
@vinothkumar: Ответ Мэтта более эффективен. Возьмите мой как не очень хороший пример.
— ОКВ
Здесь мы можем определить значение i.
— svk
@vinothkumar iпередается function(i)через JQuery each(). i==2используется для доступа к третьей радиокнопке. Обратитесь к моим кодам.
— ОКВ
какая жалость к старым браузерам?
— sarepta
6
<span id="radiobutt">- Двоюродный брат RadioHead?
— Icemanind
27

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

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

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);
    }
  });
});
— mac10688
источник
3
+1, но я обнаружил, что вы не можете использовать removePropсвойство disabled. Документы jQuery говорят, что prop("disabled", false);вместо этого нужно использовать . api.jquery.com/prop/#prop-propertyName-value
— Ли Гриссом,
1
это гораздо лучший способ использовать prop (). У меня возникли проблемы с использованием attr () для флажков. В первый раз все нормально, во второй раз никакого ответа. Так что используйте prop (). +1 от меня
— бранделайзер
11

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

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

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

$("input:radio[name='userradiobtn']").click(function() {
    var isDisabled = $(this).is(":checked") && $(this).val() == "3";
    $("#chkbox").attr("disabled", isDisabled);
    $("#usertxtbox").attr("disabled", isDisabled);
});
— ScottE
источник
1
@ScottE: each()использовался, потому что мы хотим получить третью радиокнопку. Мы $("input[type=radio]:eq(2)")тоже можем использовать . Ваш метод идентифицирует переключатель по значению, что, конечно, тоже верно. :)
— ОКВ
если пользователь сначала устанавливает флажок и вводит текст в текстовое поле, а затем, если он выбирает переключатель, установленный флажок должен быть снят, а текстовое поле будет очищено? Как я могу это сделать ... Я задаю эти вопросы, потому что я anewbie ... Заранее спасибо ..
— svk
@vinothkumar - имея в виду это требование, я, вероятно, не стал бы настраивать js, как указано выше, но в этом случае просто проверьте, отключен ли элемент и вызовите $ ("# usertxtbox"). val ("") на I будет
— ScottE
8

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

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

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

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

— Ахмед Камаль
источник
Согласно официальному сайту JQuery, опора - это то, что нужно. +1
— Moiz Tankiwala
2

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

 <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

— S Philp
источник
0

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

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
        }
    });
});
— Нильс Бом
источник
Я не работал с прилагаемым HTML, но это довольно просто, imho.
— Нильс Бом
0

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

Прежде всего, вы не должны использовать .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); 
});
— Стивен
источник
0

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);
— Рахул Сонон
источник
0

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

— Гуфран Хасан
источник
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.