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