JS : クリックした際の表示変更

Question

写真の様な入力画面を作成しています。
無料にチェックを入れた場合、価格の入力欄にdisabled:"true"を加えて、入力不可、にしたいのですが、以下の通りコードを書いてもうまくいかず、誤りをご指摘頂きたくお願い致します。

<form class="new_lesson" id="new_lesson" enctype="multipart/form-data" action="/user/myaccount/lessons" accept-charset="UTF-8" method="post"><input name="utf8" type="hidden" value="&#x2713;" /><input type="hidden" name="authenticity_token" value="a3odZxOIdWA5s/qG8lUV1VbJ3WvJ3OYobaYYVi+S3t4lNqqqqTaotYlBLNHbN8zdqKtQBs3IS+7Yu78L7PS6pA==" />
      
<div class="form-group row">
  <div class = "col-12 text-left">
    <label class="required" for="lesson_price">価格（¥）</label>
  </div>
  <div class="col-6">
    <input class="form-control" id="lesson-price-field" type="number" name="lesson[price]" />
  </div>
  <div class="col-6 pl-0">
    <input name="lesson[price]" type="hidden" value="0" /><input class="form-check-input" id="disable-price-field" type="checkbox" value="1" name="lesson[price]" />
    <label class="form-check-label" id="disable-price-field" for="lesson_price">無料</label>
    <br><span class="small text-danger">無料レッスンはcheckを入れてください。</span>
  </div>
</div>


 <input type="submit" name="commit" value="作成する" class="btn btn-secondary btn-block btn-color-black" data-disable-with="作成する" />
</form>   

$(document).on('page:change', function() {
  $('form.new_lesson').on('click', '#disable-price-field', function() {
    return $('#lesson-price-field').attr('disabled');
  });
});

Answer 1

disabledにアクセスする場合はattrではなくpropでやってください
指定のしかたもおかしいので以下参考に

$(function(){
  $('form.new_lesson').on('click', '#disable-price-field', function() {
    $('#lesson-price-field').prop('disabled',$(this).prop('checked'));
  });
});

Comments

[innjera]

有難う御座います！！解決しました

[innjera]

railsでturbolinkを利用していたので、以下でうまくいきました。

$(document).on('turbolinks:load', function(){
$('form.new_lesson').on('click', '#disable-price-field', function() {
$('#lesson-price-field').prop('disabled',$(this).prop('checked'));
});
});

Answer 2

railsでturbolinksを利用していたので、以下でうまくいきました。

$(document).on('turbolinks:load', function(){
  $('form.new_lesson').on('click', '#disable-price-field', function() {
    $('#lesson-price-field').prop('disabled',$(this).prop('checked'));
  });
});