入力フォームで以下のような構成の必須入力項目の残数を示すステータス表記があります。

lang
1▼残入力項目1以上
2<div class="number ng">残りの必須項目<span>16</span></div>
3▼残入力項目無し
4<div class="number ok">入力が完了しました<span></span></div>
5<button type="submit" disabled><span>確認する</span></button>

残入力項目無しの時に、確認ボタンの「disabled」を削除し、「number」のクラスの「ng」を「ok」にJqueryで切り替えたいです。

以下のように読み込み時の判別はできたのですが、

lang
1if($('.number span:empty').length){
2$('.number').addClass('ok');
3$('.number').removeClass('ng');
4$('input[type="submit"]').prop('disabled', false);
5} else {
6$('.number').removeClass('ok');
7$('.number').addClass('ng');
8$('input[type="submit"]').prop('disabled', true);
9}
10

動的な変化で切り替える方法がわかりません。

ご教授のほどよろしくお願いいたします。

【追記】
修正のご質問を頂きましたので、今回の要件を追記させて頂きます。

今回諸条件により、の値の制御など既存プログラムは編集できないため、別途処理する必要があります。また、formの入力項目が多く選択状況によって様々なパターンに分岐する複雑なものなので、入力状況の監視をするより、の変化を監視した方がよい状態です。

yambejp

2018/04/25 01:08

spanの値をどうやって動的に変化させるのでしょうか？

HayatoKamono

2018/04/25 01:49 編集

残りの必須項目の値は動的にここでは掲載されてないコード内で変えてる訳ですよね？そこで残りの必須項目数をチェックしたりしてるはずなので、そこでやるのが好ましいと思います。回答つく前に質問見直した方がよさそうな。

m.ts10806

2018/04/25 01:38

formのchangeイベントを監視するとかそういう話でしょうか。

castail

2018/04/25 02:15

ご説明が足りず申し訳ありません。今回諸条件により、既存プログラムは編集できないため、別プログラムで処理するしか方法がない状態です。[yambejp様 ▶︎] spanの値の制御も元プログラムでの制御となるため不明です。 [ HayatoKamono様 ▶︎] 上記通り、元プログラムでの制御となるため不可となります。[mts10806様 ▶︎] formの入力項目が多く選択状況によって様々なパターンに分岐する複雑なものなので、入力状況の監視をするより、の変化を監視した方がよい状態です。

m.ts10806

2018/04/25 02:18

要件として回答に必要な材料となりえる部分も多いので、お手数ですが質問本文に追記してください。

castail

2018/04/25 02:24

[mts10806様 ▶︎]ご指摘ありがとうございます。追記完了いたしました。

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

回答3件

ベストアンサー

監視してフラグで管理

css
1.ok{color:red;}
2.ng{background-Color:lime;}

javascript
1$(function(){
2  /* 監視処理 */
3  (function(){
4    var flg=$('.number:has(span:empty)').length>0;
5    $('.number').addClass(flg?'ok':'ng').removeClass(flg?'ng':'ok');
6    $('button[type=submit]').prop('disabled',!flg);
7    setTimeout(arguments.callee,100);
8  })();
9  /* 以下debug用 0.5秒毎にspanをデクリメント*/
10  var timerID=setInterval(function(){
11    var txt=parseInt($('.number span').text())-1;
12    if(txt==0){
13      txt="";
14      clearInterval(timerID);
15    }
16    $('.number span').text(txt);
17  },500);
18});

HTML
1<div class="number ok">残り<span>5</span></div>
2<button type="submit" disabled><span>確認する</span></button>

投稿2018/04/25 03:42

yambejp

総合スコア114784

castail

2018/04/29 08:46

ご連絡が遅くなり大変申し訳ありません。御指示頂いた内容で実現できました！この度は誠にありがとうございました。

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

要素の変化を常に監視することになると思います。

要素の中身が変更されたことを知る

html
1<form>
2<input type="text" name="a" id="a">
3<div class="number ng">残りの必須項目<span>1</span></div>    
4<button type="submit" disabled><span>確認する</span></button>
5</form>

js
1var monitor = null;
2$(function(){
3    $('#a').on('change',function(){    
4        if($('#a').val() != ''){
5            $('.number span').text("");
6        }else{
7            $('.number span').text("1");
8        }
9    });
10    
11    var number_monitor = function() {
12        if ($('.number span').text() == '') {
13            //ここにspanが空になったときの処理を追加
14
15
16            //clearInterval(monitor);
17            //どこかで止めた方がいいけど、再開部分を書く必要があるので止めなくてもいいかもしれません・・・
18        }
19    };
20    monitor = setInterval(number_monitor, 300);
21});
22

投稿2018/04/25 03:15

m.ts10806

総合スコア80850

castail

2018/04/29 08:47

ご連絡が遅くなり大変申し訳ありません。御指示頂いた内容を試したのですが、うまく動作しない状態です。こちらの記述ミスの可能性もあるため引き続き検証させて頂きます。ただ、今回正常に動作する方法えおご教授いただいた方がいらっしゃるので、今回のベストアンサーはその方にさせて頂きます。悪しからずご了承ください。

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

span要素内のテキスト監視以外の部分は既に出来ている、またはご自身で実装出来るようなので、監視部分のサンプルコードを書いてみました。

resetボタンを押すと、span要素内のテキストが空になる
span要素のテキストノードを監視している
span要素のテキストが空になるとアラートが表示される

デモコード

<span id='textField'>100</span>
<button id='resetButton' type='button'>reset</button>

$(document).ready(function() {
  
  var $textField = $('#textField');
  
  // <span id='textField'>のテキストノード
  var $textNode = $textField.contents().filter(function(index, element) {
    return element.nodeType === 3;
  })
  
  var $resetButton = $('#resetButton');

  function handleButtonClick(event) {
    $textNode[0].textContent = '';
  }
  
  $resetButton.on('click', handleButtonClick)

  var observer = new MutationObserver((mutations) => {
    mutations.forEach((mutation) => {

      if (mutation.type === "characterData" && mutation.target.textContent === "") {
        alert('empty value!!');
        // ここでやりたいことをご自由に
      }

    });    
  });
 
  var config = { characterData: true };

  observer.observe($textNode[0], config);
  
});

https://codepen.io/anon/pen/yjJBJq

参考

投稿2018/04/25 03:02

総合スコア2415

2018/04/29 08:47

2018/04/30 05:41 編集

> こちらの記述ミスの可能性もあるため引き続き検証させて頂きます。動作確認済みのコードをcodepenにあげてリンクを貼っていたはずなので、そちらで正常にコードが動作することは確認出来るはずです。コードを理解せずにコピペで済まそうとしていませんか？MutationObserverの仕様を理解した上でご自身の実際のコードに適用しないと、上手くいかないと思います。

think49

2018/04/29 09:45 編集

私の確認不足で+評価後に無評価に戻してしまい、HayatoKamono さんの [お知らせ] に不要な履歴を残してしまったので、理由を書いておきます。 > var $textNode = $textField.contents().filter(function(index, element) { 子のテキストノードの数だけカウントしている為、10 が空要素と判定されてしまいます。質問者の出したHTMLであれば期待通りに動作しますが、「空要素」という条件を満たす為には $textField.contents().length や $textField[0].firstChild が妥当であろうと思います。質問者には伝わらなかったようですが、MutationObserver は質問者が期待する条件に最もマッチしていると思います。古いブラウザに対応する為にsetTimeoutを使う事はありますが。 https://caniuse.com/#feat=mutationobserver

HayatoKamono

2018/04/29 09:48

think49さん、ご指摘ありがとうございます。

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

あなたの回答