Aに値がある場合とBに値がある場合の見た目の変化のさせ方[jQuery]

###はじめに
あるデータがあったときに、表示自体はされていますが、Aに値がある場合はBの欄の色を変えて入力不可にしたり、その逆もありということをしたいと思っています。

その要素の特定などが、よくわからず質問いたします。

###デモデータ

PHP
1$demo['demo'][] = [
2    ['A' => 1, 'B' => 111,],
3    ['A' => 2, 'B' => 222,],
4    ['A' => 3, 'B' => 000,],
5    ];
6$demo['demo'][] = [
7    ['A' => 1, 'B' => 000,],
8    ['A' => 2, 'B' => 222,],
9    ['A' => 3, 'B' => 111,],
10    ];

上記のようなデータがあったとします。
これを表示させます。

###表示

HTML
1<table>
2    <thead>
3        <tr>
4            <th>A</th>
5            <th>B</th>
6            <th>C</th>
7        </tr>
8    </thead>
9    <tbody>
10        <?php for($i = 0; $i < count($demo); $i++) : ?>
11        <tr>
12            <?php for($j = 0; $j < 3; $j++) : ?>
13                <td>
14                    <input type="hidden" name="demo[$i][$j][num]" value="<?$demo[$i][$j]["A"]?>">
15                    <input type="text" name="demo[$i][$j][body]" value="<?=$demo[$i][$j]["B"]?>"> 
16                </td>
17            <?php endfor; ?>
18        </tr>
19        <?php endfor; ?>
20    </tbody>
21</table>

表示させた後に値を変更して送信することを想定して、フォーム仕様にしています。
横に並べるように表示させて、今回のでもの場合は２行のテーブルが表示されると思います。

###やりたいことの説明
今回のデモデータにおいて、A===1とA===3はどちらかにしか基本的には値が入らないという条件が一つあります。
今回の000はあくまでもdefault値と思っていただければと思いますが、、、

今回のテーブルでは横に３列のテーブルができます。

A===1	A===2	A===3
111	222	000
000	222	111

この時に上記の場合000のセルのフォーム部品を編集できないようにdisabledになるようなスクリプトを考えています。
もちろん、下記のような表の場合

A===1	A===2	A===3
000	222	000
000	222	111

両方が値がない場合はどちらも入力できるような状況とします。

※両方に値をいれてから送信したらどうするの？ということは今回は置いておいてください。

x_x

2018/12/03 07:09

すべてにデータがあるように見えますが、「値がない」というのはどういう状態を指していますか？　また、PHPでHTML出力時に制御しないのでしょうか？

Fetherion

2018/12/03 10:38

「値がない」というのは、確かに厳密に言えば不適切な状況でした。ここでいう「値がない」というのは「０００という値である」ということです。””ではなく”０００”ですね。PHPとHTMLでの出力でやるというやり方は確かにできるのですが、今回それをjQueryとかでやるならどうやるのかな？と思ったしだいです。

行動規範の内容に同意します

回答2件

ベストアンサー

動作確認しました。

js
1var table = [$('tbody > tr:eq(0) input[type=text]'), $('tbody > tr:eq(1) input[type=text]')];
2for ( var i=0; i!=4; i+=2 ){
3  if ( table[0][i].value === table[1][i].value) continue;
4  if ( table[0][i].value === '000') table[0][i].disabled='disabled';
5  if ( table[1][i].value === '000') table[1][i].disabled='disabled';
6}

投稿2018/12/03 11:31

Lhankor_Mhy

総合スコア36074

これでどうですか？

js
1  $('input').change(function() {
2    if(!$(this).val() == '') {
3      $(this).siblings().attr("disabled");
4      $(this).siblings().css({background:"#f00"});
5    }