jQueryのセレクタがいっぱいありすぎて覚えれないです。
セレクトボックスにname属性を使用してアクセスする場合$(‘select[name=hoge’)と言う感じでアクセスできます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8" /> <title>サンプル</title> <script src="http://code.jquery.com/jquery.js"></script> <!-- コーディング部分 --> <script type="text/javascript"> function a(){ $("select[name=sel1").attr("disabled","disabled"); } </script> <!-- コーディング部分 --> </head> <body> <form> <div id="all"> <select name="sel1"> <option value="1">test1 <option value="2">test2 </select> <br> <select name="sel2"> <option value="1">test3 <option value="2">test4 </select> </div> <input type="button" value="ボタン" onclick="a();" /><br> </form> </body> </html> |
ボタンを押すとセレクトボックスが押せなくなります。DEMOです。
フォーム部品をdivタグで囲んでいるような場合、divタグのidをallとすると$(‘#all :input’)とするとdivタグ内の全てのinput部品を操作することができます。
以下ではdivタグ内のテキストボックスを全てdisabledにします。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8" /> <title>サンプル</title> <script src="http://code.jquery.com/jquery.js"></script> <!-- コーディング部分 --> <script type="text/javascript"> function a(){ $("#all :input").attr("disabled","disabled"); } </script> <!-- コーディング部分 --> </head> <body> <form> <div id="all"> <input type="text" name="text1"><br> <input type="text" name="text2"><br> </div> <input type="button" value="ボタン" onclick="a();" /><br> </form> </body> </html> |
DEMOです。
画面上の全てのセレクトボックスを選択するには$(‘select’)とします。
テキストボックスの場合は$(‘input[type=text]’)とします。これで画面上の全てのテキストボックスを操作できます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8" /> <title>サンプル</title> <script src="http://code.jquery.com/jquery.js"></script> <!-- コーディング部分 --> <script type="text/javascript"> function a(){ $("input[type=text]").attr("disabled","disabled"); } </script> <!-- コーディング部分 --> </head> <body> <form> <div id="all"> <input type="text" name="text1"><br> <input type="text" name="text2"><br> </div> <input type="button" value="ボタン" onclick="a();" /><br> </form> </body> </html> |
DEMOです。
ラジオボタンを操作する場合は$(‘input[type=radio]’)とします。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8" /> <title>サンプル</title> <script src="http://code.jquery.com/jquery.js"></script> <!-- コーディング部分 --> <script type="text/javascript"> function a(){ $('input[type=radio]').attr("disabled","disabled"); } </script> <!-- コーディング部分 --> </head> <body> <form> <div id="all"> <input type="radio" name="aaa" value="test1">test1 <input type="radio" name="aaa" value="test2">test2 <input type="radio" name="aaa" value="test3">test3 </div> <input type="button" value="ボタン" onclick="a();" /><br> </form> </body> </html> |
DEMOです。
チェックボックスを操作する場合は$(‘input[type=checkbox]’)とします。
$(‘input[type=checkbox]’).prop(“checked”,false);という感じです。
テキストエリアを操作する場合は$(‘textarea’)とします。
ファイル名と参照ボタンの操作をする場合は$(‘input[type=file]’)とします。
KHI入社して退社。今はCONFRAGEで正社員です。関西で140-170/80～120万から受け付けております^^
得意技はJS(ES6),Java,AWSの大体のリソースです
コメントはやさしくお願いいたします^^
座右の銘は、「狭き門より入れ」「願わくは、我に七難八苦を与えたまえ」です^^
