bootstrap + jQuery でフォーム画面のinputのdisabled要素を動的に制御したい。

###前提・実現したいこと
bootstrapとLaravelでフォーム画面を作っています。jQueryを使ってフォームの要素をdisabledにするなど動的に制御したいと考えています。

下記のコードで、htmlの"about_date"に値がある場合にのみ、"main_contents_setting"classのチェックボックスを有効に、それ以外の時は無効(disabled)にしたいのですが、下記のコードではdisabledになりませんでした。

bootstrapとjQueryが何か干渉してしまっているのでしょうか。
アドバイスいただければ幸いです。
よろしくおねがいいたします。

###発生している問題・エラーメッセージ

下記のコードだとcheckboxが無効になりません。

エラーメッセージは特に出ておりません。

###該当のソースコード

[html]
<div class="form-group row">
        <input name="about_date" id="about_date" type="date" class="form-control" value="{{ old('about_date', $about_date) }}"/>
  </div>

<div class="form-group row">
    <div class="main_contents_setting">
        <input type="checkbox" name="month_main" id="month_main">
        <input type="checkbox" name="year_main" id="year_main">
    </div>
</div>



[about_date.js]

$(function() {
 $("#about_date").change(function() {
  if( $(this).val() === "" ) {
    $('#month_main').prop('disabled', true);
    $('#year_main').prop('disabled', true);
} else {
    $('#month_main').prop('disabled', false);
    $('#year_main').prop('disabled', false);
    }
  });
});

###試したこと
about_date.jsのイベントを拾うところのメソッドはchange以外にも下記を試しましたが動作しません。
keypress
blur

disabledにするためのメソッドは下記を試しましたが切り替わりませんでした。
addClass/removeClass
attr

###補足情報(言語/FW/ツール等のバージョンなど)
下記の通りです。
#Laravelは事象にあまり関係がないような気がします。

bootstrap 3.3.7
Laravel5.4
jQuery1.11.3