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

--- EDIT --------------- 让我重新定义：我的代码正在使用。追加来创建上述代码的多个实例。由于附加金额无限制，我无法使用$('#id')定义复选框，因为可能有数百个，例如$('#id1')，$('#id2')等。我需要一个避免使用的功能提及确切的元素ID，由复选框称为 onClick ，并影响前缀div，后者也。

Answer 1

有效：）

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 2

如果在准备好文档时元素不存在，请使用.on，如下所示：

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

});

jQuery .on documentation

Answer 3

请勿使用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 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调用函数

4 个答案: