質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

1回答

1475閲覧

disableがうまくいきません

退会済みユーザー

退会済みユーザー

総合スコア0

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

0クリップ

投稿2016/10/14 03:03

編集2016/10/14 03:04

disableがうまくいきません。js超初心者です。
ソースは「テストボタン1」を押すと、キャンセルと登録が出現するようにCSSで実装していますが、キャンセルと登録を押した時に「テストボタン1」は非活性の状態にしたいです。jsで実装しようと試みたのですがうまくいきませんでした。

<tr> <td colspan="3"> <div class="objectopen"> <a href="#" class="mr-80"> <label for="oo-cap3"> <img src="/img/chenge.png">テストボタン1</a> </label> <a href="javascript:showDlg('#mdl-category-item-add');">テストボタン2</a> <input id="oo-cap3" type="checkbox"> <div class="oo-cont2"> <a href="#"><label for="oo-cap3">キャンセル</a></label><a href="#">登録</a> </label> </td> </tr>

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

jQueryで処理するならアンカータグにコードを埋め込まないほうがよいでしょう
ちなみにHTMLをきちんと書かないとうまく要素を参照できないので注意してください

css

1input[type=checkbox] + div{display:none;} 2input[type=checkbox]:checked + div{display:block;} 3

javascript

1$(function(){ 2 $('div.oo-cont2').find('a').on('click',function(){ 3 $(this).parents('td').find('label').attr('for',function(index,prop){return (r=prop.match(/^stop_(.+?)$/))?r[1]:"stop_"+prop}); 4 }); 5}); 6

HTML

1<table> 2<tr> 3<td colspan="3"> 4<div class="objectopen"> 5<label for="oo-cap1"> 6<img src="xxx.png">テストボタン1</a> 7</label> 8<a href="">テストボタン2</a> 9</div> 10<input id="oo-cap1" type="checkbox"> 11<div class="oo-cont2"> 12<a href="#">キャンセル</a><a href="#">登録</a> 13</div> 14</td> 15</tr> 16<tr> 17<td colspan="3"> 18<div class="objectopen"> 19<label for="oo-cap2"> 20<img src="xxx.png">テストボタン1</a> 21</label> 22<a href="">テストボタン2</a> 23</div> 24<input id="oo-cap2" type="checkbox"> 25<div class="oo-cont2"> 26<a href="#">キャンセル</a><a href="#">登録</a> 27</div> 28</td> 29</tr> 30<tr> 31<td colspan="3"> 32<div class="objectopen"> 33<label for="oo-cap3"> 34<img src="xxx.png">テストボタン1</a> 35</label> 36<a href="">テストボタン2</a> 37</div> 38<input id="oo-cap3" type="checkbox"> 39<div class="oo-cont2"> 40<a href="#">キャンセル</a><a href="#">登録</a> 41</div> 42</td> 43</tr> 44</table>

まとめたVer

以下、そのままHTMLにコピペしてみてください
仕様:

  • テストボタン1,3,5および隣の画像をおすと、チェックボックスがチェックされて「キャンセル」「登録」が表示される
  • もう一度押すと、チェックボックスが外れて表示が消える
  • 「キャンセル」「登録」が表示されている状態で、どちらかをクリックすると、テストボタンや画像をクリックしても閉じなくなる
  • 「キャンセル」「登録」をもう一度おすと閉じることができるようになる

上記仕様ではないようでしたらどういう挙動を想定しているか指示してください

HTML

1<style> 2input[type=checkbox] + div{display:none;} 3input[type=checkbox]:checked + div{display:block;} 4</style> 5<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 6<script> 7$(function(){ 8 $('div.oo-cont2').find('a').on('click',function(){ 9 $(this).parents('td').find('label').attr('for',function(index,prop){return (r=prop.match(/^stop_(.+?)$/))?r[1]:"stop_"+prop}); 10 }); 11}); 12</script> 13<table> 14<tr> 15<td colspan="3"> 16<div class="objectopen"> 17<label for="oo-cap1"> 18<img src="xxx.png">テストボタン1</a> 19</label> 20<a href="">テストボタン2</a> 21</div> 22<input id="oo-cap1" type="checkbox"> 23<div class="oo-cont2"> 24<a href="#">キャンセル</a><a href="#">登録</a> 25</div> 26</td> 27</tr> 28<tr> 29<td colspan="3"> 30<div class="objectopen"> 31<label for="oo-cap2"> 32<img src="xxx.png">テストボタン3</a> 33</label> 34<a href="">テストボタン4</a> 35</div> 36<input id="oo-cap2" type="checkbox"> 37<div class="oo-cont2"> 38<a href="#">キャンセル</a><a href="#">登録</a> 39</div> 40</td> 41</tr> 42<tr> 43<td colspan="3"> 44<div class="objectopen"> 45<label for="oo-cap3"> 46<img src="xxx.png">テストボタン5</a> 47</label> 48<a href="">テストボタン6</a> 49</div> 50<input id="oo-cap3" type="checkbox"> 51<div class="oo-cont2"> 52<a href="#">キャンセル</a><a href="#">登録</a> 53</div> 54</td> 55</tr> 56</table>

投稿2016/10/14 03:47

編集2016/10/14 09:39
yambejp

総合スコア114572

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

yambejp

2016/10/14 05:42

なんかチェックボックスの位置がおかしかったので修正しておきました
退会済みユーザー

退会済みユーザー

2016/10/14 07:21

これだとまったく動かなくなってしまいました・・・
yambejp

2016/10/14 07:32

では、まとめたVerを追記しておきました。 仕様と挙動を確認してください
退会済みユーザー

退会済みユーザー

2016/10/14 09:25

まとめて頂いた方法でうまくいきました!ご丁寧にありがとうございました!大変助かりました!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問