jquery отключен следующий элемент, если флажок установлен

Question

Как отключить текстовое поле, если установлен флажок.У меня есть несколько текстовых полей и флажков рядом друг с другом.

HTML:

<form id="form">
<input type="checkbox" name="deposit_checked"> <input type="text" name="deposit_value">
<input type="checkbox" name="booking_checked"> <input type="text" name="booking_value">
<input type="checkbox" name="referral_checked"> <input type="text" name="referral_value">
</form>

Я могу сделать это индивидуально с кодом ниже:

$("input[name=deposit_checked]").change(function(){

if( $("input[name=deposit_checked]").is(":checked") ) {
    $("input[name=deposit_value]").attr("disabled", false);
} else {
    $("input[name=deposit_value]").attr("disabled", true);
}

})

длясэкономить время, я попытался использовать функции .each () и .next (), но не повезло:

$("#form input[type=checkbox]").each(function() { 
$(this).change(function(){
   if( $(this).is(":checked") ) {
  $(this).next().attr("disabled", false);
   } else {
  $(this).next().attr("disabled", true);
   }
})
})

Answer 1

Вы устанавливали неправильное значение для атрибута disabled.Вот исправление:

$("#form input[type=checkbox]").each(function() { 
$(this).change(function(){
   if( $(this).is(":checked") ) {
  $(this).next().removeAttr("disabled");
   } else {
  $(this).next().attr("disabled", "disabled");
   }
})
})

Вот рабочий пример на jsfiddle .Обратите внимание, что весь javascript должен быть объявлен в обработчике $(window).load().

Answer 2

Чтобы свести к минимуму выбор объектов DOM, покройте входные данные такими вещами, как span.

Вы можете увидеть этот пример здесь: http://jsfiddle.net/g4mQR/

<form id="form">
  <span>
    <input type="checkbox" name="deposit_checked"> 
    <input type="text" name="deposit_value">
  </span>
  <span>
    <input type="checkbox" name="booking_checked"> 
    <input type="text" name="booking_value">
  </span>
  <span>
    <input type="checkbox" name="referral_checked"> 
    <input type="text" name="referral_value">
  </span>
</form>

JS код

$('#form input[type=checkbox]').click(function(){
  var obj = $(this).siblings('input[type=text]');
  obj.attr('disabled', !obj.attr('disabled'));
})

Answer 3

я думаю, что вы хотите скрыть и показать текстовое поле, соответствующее его флажку, так что вы можете сделать это, прикрепив событие change, вот как это делается: change обработчик события запускается каждый раз, когда значение флажкаизменяется

$(document).ready(function() {
   $('.chkboxClass').bind('change', function () {

   if ($(this).is(':checked'))
     $(this).next('.txtboxclass').hide();
   else
     $(this).next('.txtboxclass').show();

  });
});

, где .chkboxclass является классом для всех флажков, а .txtboxclass является классом для всех текстовых полей

Answer 4

Это должно сделать:

$('#form input[type="checkbox"]').change(function() {
   var t = $(this);
    t.next().attr('disabled', ! t.is(':checked'));
});

Не забудьте установить состояние полей и флажков в начале. Например: все отключено и отключено.

+ Возможно, вы захотите изменить бит #form в селекторе.