web-dev-qa-db-ja.com

チェックボックスonclickまたはonchangeから関数を呼び出す方法

チェックボックスを選択して、2つの入力フィールドを無効または非表示にするフォームがあります。 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 ---------------再定義させてください：私のコードは.appendを使用して作成しますmultiple上記のコードのインスタンス。追加の量は無制限なので、$('#id')、$('#id1') ..などのように数百個ある可能性があるため、$('#id2')でチェックボックスを定義できません。 onClickと呼ばれるcheckboxで呼び出されるbeforehead div（alsoが追加される）と呼ばれる、正確な要素IDの言及を避ける機能が必要です。

javascriptjquerycheckboxonclick
9
Ra Tre

できます ：）

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" />
10
Maxim Mazurok

Doc readyの時点で要素が存在しない場合は、.onを次のように使用します。

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

});

jQuery .on documentation

4
Ted

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
  } );
} );
3
error
$(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
Sunil kumar