відключити текстове поле за допомогою 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>

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

  });

Насправді не потрібно, але невелике вдосконалення коду 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");
        });
    }
});

Цей потік трохи старий, але інформацію слід оновлювати.

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

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

Ось якийсь робочий код, який відключається, якщо натиснутий третій прапорець, інакше видаляється атрибут вимкнено.

Примітка. Я додав ідентифікатор у прапорець. Також пам’ятайте, що ідентифікатори повинні бути унікальними у вашому документі, тому або видаліть ідентифікатори на радіо кнопках, або зробіть їх унікальними

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

Я здогадуюсь, ви, ймовірно, хочете прив’язати подію "клацання" до кількох радіо кнопок, прочитати значення натиснутої радіо кнопки та залежно від значення, відключити / включити прапорець або текстове поле.

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

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

Перш за все, ви не повинні використовувати .each () і використовувати індекс, щоб вказати певну радіо-кнопку. Якщо ви працюєте з динамічним набором радіо кнопок або якщо після цього додаєте або видалите кілька перемикачів, ваш код буде реагувати на неправильну кнопку!

Далі, але це, мабуть, не було випадком, коли було зроблено ОП, я вважаю за краще використовувати .on ('click', function () {...}), а не натискати ... 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); 
});

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

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