前提条件・したいこと
- 並び替えには、Sortableというjquery uiプラグインを使っています。
- ページが読み込まれて、ドラッグアンドドロップで並び替えする前は、更新ボタンがdisabledになります。
- ドラッグアンドドロップで並び替えをすると、更新ボタンがenabledになります。
問題点
- ドラッグアンドドロップで並び替えをしても、更新ボタンのdisabledが解除されません。
ソース
html
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js" ></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js" ></script> <title>Sortable</title> </head> <body> <ol id="index-list"> <li> <details> <summary class="summary" data-id="66" data-title="1" data-page="66" data-fid="0" data-nest="0" > id:66/1巻/0章/0節/nested:0 </summary> </details> </li> <li> <details> <summary class="summary" data-id="67" data-title="2" data-page="67" data-fid="0" data-nest="0" > id:67/2巻/0章/0節/nested:0 </summary> </details> </li> <li> <details> <summary class="summary" data-id="76" data-title="300" data-page="76" data-fid="0" data-nest="0" > id:76/3巻/0章/0節/nested:0 </summary> </details> </li> </ol> <button id="submit" disabled>更新</button> </body> <script> $("#index-list").on("change", function () { console.log("changed"); $("#submit").prop("disabled", false); }); $("#index-list").sortable({ cancel: ".stop", }); </script> </html>
試してみたこと
- ドラッグアンドドロップでリストが並び替えられるときに変化すると思い、下記ソースのように、onのchangeメソッドを使いました。
ですが、ドラッグアンドドロップをしても、更新ボタンのdisabledが解除されず、使用可能にはならなかったです。
jquery
$("#index-list").on("change", function () { console.log("changed"); $("#submit").prop("disabled", false); });
最後に
皆様方のお力をお借りできればと思います。お手数ですが、宜しくお願い致します。
まだ回答がついていません
会員登録して回答してみよう
