Как вызвать функцию из checkbox onclick или onchange

у меня есть форма, в которой я хочу отключить или скрыть два поля ввода, установив флажок. Я могу легко сделать это, когда на документе.готов, но поскольку я добавляю эти поля, функция не вступает в силу. Как вызвать функцию с помощью onClick?

вот мой рабочий код

$(function() {
  $(checkbox).click(function() {
    if ($('#checkbox').is(':checked')) {
      $('#appTimes').find('input').attr('disabled', true);
    } else {
      $('#appTimes').find('input').removeAttr('disabled');
    }
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="appTimes" id="appTimes">
  <input name="stopTime1" type="text" id="stopTime1" />
  <input name="stopTime12" type="text" id="stopTime12" />
</div>
<input name="checkbox" type="checkbox" id="checkbox" />

и это то, что я пытаюсь do:

function boxDisable(e) {
  $(this).click(function() {
    if ($(this).is(':checked')) {
      $(e).find('input').attr('disabled', true);
    } else {
      $(e).find('input').removeAttr('disabled');
    }
  });
}
<div class="appTimes" id="appTimes">
  <input name="stopTime1" type="text" id="stopTime1" />
  <input name="stopTime12" type="text" id="stopTime12" />
</div>
<input name="checkbox" onclick="boxdisable(appTimes);" type="checkbox" id="checkbox" />

---редактировать--------------- Позвольте мне переопределить: мой код использует .добавить создать несколько экземпляры вышеуказанного кода. Поскольку количество добавлений неограниченно, я не могу определить флажок с $('#id'), потому что их могут быть сотни, как $('#id1'), $('#id2').. так далее. Мне нужна функция, которая избегает упоминания точного идентификатора элемента, называется onClick на флажок и влияет на beforehead div, который является и прилагается.

6
checkbox javascript jquery onclick

4 ответов

это работает :)

function boxDisable(e, t) {
    if (t.is(':checked')) {
      $(e).find('input').attr('disabled', true);
    } else {
      $(e).find('input').removeAttr('disabled');
    }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="appTimes" id="appTimes">
  <input name="stopTime1" type="text" id="stopTime1" />
  <input name="stopTime12" type="text" id="stopTime12" />
</div>
<input name="checkbox" onclick="boxDisable(appTimes, $(this));" type="checkbox" id="checkbox" />
8

Если элементы не существуют во время doc ready, используйте .on, например:

$(document).ready(function(){
    $(document).on('change', 'input[type="checkbox"]', function(e){
        //do your stuff here
    });

});

С помощью jQuery .по документации

4

не используйте

3

$(function() {
  $(checkbox).click(function() {
    if ($('#checkbox').is(':checked')) {
      $('#appTimes').find('input').attr('disabled', true);
    } else {
      $('#appTimes').find('input').removeAttr('disabled');
    }
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="appTimes" id="appTimes">
  <input name="stopTime1" type="text" id="stopTime1" />
  <input name="stopTime12" type="text" id="stopTime12" />
</div>
<input name="checkbox" type="checkbox" id="checkbox" />
1