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

[yambejp]

なんかダブってるみたいなのでどちらかを削除依頼出してください

[tn3376ams]

両方に返事を頂いてしまっています。
どうすればいいでしょうか？

[tn3376ams]

すみません、もう片方に書き込みをいただいた方ですね。
こちらに書き込みなおしていただいてよろしいでしょうか？

Answer 1

初期ではsearchのみ活性、sendを非活性にして置き、

いまのコードだと、初期でも、sendは非活性になってないですね。
クリックすると、/sendへ遷移してしまいます。

その原因は、HTMLの仕様上、a要素には、disable属性が効かないからだと思います。
https://developer.mozilla.org/ja/docs/Web/HTML/Element/a

aタグをクリックできないようにする方法として、
CSSのpointer-events:noneを使う
というのがあるようです。

<a href="/send" id="send_button" class="disabled">send</a>

a.disabled {
  pointer-events: none;
}

ただし、このままだとキーボード操作(TABキーとかEnterキー)によりa要素を押せてしまうので、tabindex属性を使ってそれを抑止します。

<a href="/send" id="send_button" class="disabled" tabindex="-1">send</a>

活性化するときは、disabledクラスを削除して、tabindex属性値を0に変えれば良いでしょう。

$('#search_button').click(function() {
	$('#send_button').removeClass('disabled').attr('tabindex', 0);
});

ちなみに、
$('#send_button').removeAttr('disabled');
とすると一瞬チカっと活性化するのですが、すぐに非活性になってしまいます。

この現象は、私の環境では再現しませんでした。

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

それで正しいと思います。prop('disabled', false)はjQueryオブジェクトを返すはずなので。

Comments

[tn3376ams]

試してみましたが、.removeAttr('disabled')の時と全く同じチカッと一瞬活性するというものでした。

他の方からアンカーにdisabledは使えないということを聞き、sendを
<button type="submit" id="send_button" disabled>send</button>
として試したところ同じチカッと一瞬活性でした。
今回は
$('#csv_export').prop('disabled', false);
でも同じ現象が起きました。

[tn3376ams]

こちらもこの動きで正しく動作できることは確認しました。
ありがとうございました。