jQueryのpropが正常に作動しない。

Question

二つのボタン、searchとsendがあります。
初期ではsearchのみ活性、sendを非活性にして置き、searchで検索した場合のみsendボタンを活性化しようと考えています。

ボタンは以下の通りです。
<button type="submit" id="search_button">search</button>
<a href="/send" id="send_button" disabled>send</a>

jQueryは以下の設定です。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script> jQuery(function($) { $('#search_button').click(function() { $('#send_button').prop('disabled', false); }); }); </script>

この設定でsearchボタンをクリックしても全く反応しません。
ちなみに、
$('#send_button').removeAttr('disabled');
とすると一瞬チカっと活性化するのですが、すぐに非活性になってしまいます。

また、
var result = $('#send_button').prop('disabled', false);
alert(result);
とするとfalseが表示されるとどこかに書いてあったのですが、[object Object]が表示されます。

原因及び解決方法を教えていただけないでしょうか。
よろしくお願い致します。

Comments

[m.ts10806]

コードやエラーはマークダウンのcode機能を利用してご提示ください。
https://teratail.com/questions/238564

Answer 1

$(function(){
  $('#send_button').on('click',function(e){
    if(!$('#search_button').data('clicked')){
      e.preventDefault();
    }
  });
  $('#search_button').on('click',function(e){
    e.preventDefault();
    $(this).data('clicked',1);
  });
});

Comments

[yambejp]

search_buttonはsubmitなのでclickを殺します
send_buttonはアンカーなのでdisabledでは制御できません

[tn3376ams]

試してみましたが、変化ありませんでした。
アンカーはdisabledでは制御できないとのことですが、できているのはCSSとの絡みがあるのでしょうか？
CSSは全くわからないもので。

[yambejp]

こういうことではないのですか？

https://codepen.io/yambejp/pen/YzGKmRx

・最初にsendを押しても無反応
・searchを押すとsendを押すとページ遷移

[tn3376ams]

ご丁寧にありがとうございます。
動作、確認しました。

問題が別にあるようなので、ここはクローズさせていただきます。