monaca:onsen uiで、ons-buck-buttonをjavascript側でディセーブルする方法を教えて下さい。

Question

タイトルそのままですが、"ons-button"は、"javascript"側でディセーブルできたのですが、同テンプレート内に有る"ons-buck-button"が、"javascript"側でディセーブルする記述のしかたが分かりません。　どなたか、アドバイス宜しくお願いします。

  <ons-template id="page4.html">
    <ons-page id="fourth-page">
      <ons-toolbar>
        <div class="left"><ons-back-button id="back4" >Page 1</ons-back-button> </div>
        <div class="center">ファンクション２</div>
      </ons-toolbar>
      <div class="content" style="text-align: center">
        <p><h2>デバイス情報送信</h2></p>
        <br />
        <ons-button id="pop-button4" modifier="large--cta">終了ボタン</ons-button>
        <br /><br /><br />
        <button onclick="myApp.scan( 2 )" >デバイス情報読み込み</button><br /><br />
        <div id="statusDiv"></div>
      </div>
    </ons-page>
  </ons-template>

のように書き
javascript側で、分からないながら、js/cssコンポーネントにjQueryを追加して…

    $("#pop-button4").prop("disabled", true);
    $("#back4").prop("disabled", true);

などと、してみましたが、"pop-button4"は、ディセーブルできるものの"ons-toolbar"の"ons-back-button"は、無効化できませんでした。
またまた、基本的な質問で済みませんが、どなたか御教授宜しくお願いします。

Answer 1

ons-button
ons-back-button

ons-buttonにはdisabled属性がありますが、ons-back-buttonにはありません。
よってdisabled属性によるdisabledはできません。

以下のようにすればdisabledっぽいものはできると思います。

$("#back4").addClass('my-disabled');

.my-disabled {
  color: #disabledっぽい文字色;
  background-color: #disabledっぽい色;
  pointer-events: none;
}

Comments

[bugbug]

ご回答、有難う御座いました。　ディセーブルに出来ないのですね…
それでは、"ons-back-button"を押された時に、javascriptを強制終了するというのが可能であればトライして、それが実現できなければ、ons-toolbarにons-back-buttonからons-buttonに変更か、ons-toolbarを表示しないページにすることで解決を試みます。
っぽい色してい方法は、勉強になりました。　有難う御座いました。

[spookybird]

私が提案した方法でクリックイベントが動作しないようにできますよ。"pointer-events: none;"がそれです。

[bugbug]

重ね重ね、コメント有難う御座います。　済みません…イベントも受付なるのですね。　戻す時は、pointer-events: auto; を.my-enabledとかすれば良いのでしょうか？　さっそく、トライしてみます。
javascriptを強制終了も良く分からず、悩んでおりました。

[spookybird]

戻すときはclassはずせばOKです。
$("#back4").removeClass('my-disabled');

[bugbug]

ご回答有難う御座いました。
ちょうど、$("#back4").addClass('my-enabled');と、書いてautoとしていたところ、javascriptを呼んで2回目から、クリックイベント無効にならず、書き綴っておりましたが、ご回答の頂きました
$("#back4").removeClass('my-disabled');
で、意図した動きをしてくれました。
どうも、有難う御座いました。
一点、ons-back-buttonの青矢印の色は、変更できませんでした。背景はしっかり、変わってくれたので無効になったと伝えられると思います。

解決済みとして、ご解答頂きました内容を記述させて頂きます。

ただ、androidは、固定ナビ？とかが、画面下部に表示され、これでjavascript実行ページを移動出来てしまうので、これも無効化しないといけないようで、奥が深いと涙しています。