如何从复选框 onclick 或 onchange 调用函数

Question

我有一个表单，我想通过选中一个复选框来禁用或隐藏两个输入字段。在 document.ready 上我可以很容易地做到这一点，但由于我附加了这些字段，该功能不会生效。如何使用 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" />

这就是我想要做的：

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" />

---编辑---------------- 让我重新定义：我的代码使用 .append 来创建上述代码的 multiple 实例。由于追加的数量是无限的，我无法用 $('#id') 定义复选框，因为可能有数百个像 $('#id1')、$('#id2').. 等。我需要一个函数来避免提及确切的元素 ID，由 复选框 调用 onClick 并影响前头 div，即 also追加。

Answer 1

不要使用 onclick 属性。您的代码所做的是在用户单击后附加一个新的 onclick 处理程序。这可能不是你想要的。

您还应该使用 prop 而不是 attr 来更改 disabled。

由于您要将事件附加到的元素可能不存在于准备就绪的文档中，请将其附加到您确定会存在的最近的祖先。

$( function() { // wait for document ready
  $( '#parent-div' ).on( 'click', ':checkbox', function( e ) { // attach click event
      $( '#appTimes' ).find(':text').prop( 'disabled', $(e.currentTarget).is(':checked') ); // set disabled prop equal to checked property of checkbox
  } );
} );

Answer 2

有效:)

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" />

Answer 3

如果文档准备好时元素不存在，使用.on，像这样：

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

});

jQuery .on documentation

Answer 4

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

如何从复选框 onclick 或 onchange 调用函数

How to call a function from checkbox onclick or onchange

javascript

checkbox

jquery

onclick