如何从复选框onclick或onchange调用函数 [英] How to call a function from checkbox onclick or onchange

问题描述

我有一个表单，我想通过选择一个复选框来禁用或隐藏两个输入字段.在document.ready上时，我可以轻松完成此操作，但是由于我要追加这些字段，因此该功能不会生效.如何使用onClick调用该函数?

这是我的工作代码

  $(function(){$(checkbox).click(function(){如果($('#checkbox').is(':checked')){$('#appTimes').find('input').attr('disabled'，true);} 别的 {$('#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"><输入名称="stopTime1"类型="text" id ="stopTime1"/><输入名称="stopTime12" type =文本" id ="stopTime12"/></div><输入名称="checkbox"类型="checkbox" id ="checkbox"/>  

这就是我想要做的:

 功能boxDisable(e){$(this).click(function(){如果($(this).is(':checked')){$(e).find('input').attr('disabled'，true);} 别的 {$(e).find('input').removeAttr('disabled');}});}  

 < div class ="appTimes" id ="appTimes"><输入名称="stopTime1"类型="text" id ="stopTime1"/><输入名称="stopTime12" type =文本" id ="stopTime12"/></div>< input name ="checkbox" onclick ="boxdisable(appTimes);"type ="checkbox" id ="checkbox"/>  

---编辑----------------- 让我重新定义:我的代码正在使用. append 创建上述代码的多个实例.由于追加的数量是无限的，因此我无法使用 $('#id')定义复选框，因为可能有数百个像 $('#id1')， $('#id2') ..等.我需要一个避免提及确切元素ID的函数，通过复选框将其称为 onClick ，并影响

前

附加的前段div.

解决方案

有效:)

 功能boxDisable(e，t){如果(t.is(':checked')){$(e).find('input').attr('disabled'，true);} 别的 {$(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"><输入名称="stopTime1"类型="text" id ="stopTime1"/><输入名称="stopTime12" type ="text" id ="stopTime12"/></div><输入名称=复选框" onclick ="boxDisable(appTimes，$(this));"type ="checkbox" id ="checkbox"/>  

I have a form in which i want to disable or hide two input fields by selecting a checkbox. I can easily do it when on document.ready, but since i am appending those fields the function does not take effect. How do i call the function with onClick?

Here's my working code

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

And this is what i am trying to 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" />

---EDIT--------------- Let me redefine: My code is using .append to create multiple instances of the above code. Since the amount of append is unlimited i am unable to define the checkbox with $('#id'), because there might be hundreds of them like $('#id1'), $('#id2').. etc. I need a function that avoids mentioning the exact element id's, is called onClick by the checkbox and affecting beforehead div, which is also appended.

解决方案

It works :)

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

这篇关于如何从复选框onclick或onchange调用函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！