jQuery 2つのテキストボックスに入力があるときだけ特定のチェックボックスのdisabledを外す。

にわかながらもがんばって考えて、いろんなアプローチでやってみたのですがどうにも動きません。if文でひっかかってるとは思うのですが・・・。
間違い、その他ベストな方法があればご教授ください。

↓がんばって作ってみたモノ
http://tw2.ryu-net.info/example.txt

あと、これがうまくいくのであれば、すでにチェックボックスにチェックをいれられていた時に、テキストボックスの中身がカラになった場合、チェックボックスのチェックを外した上でdisabledにする・・・・って、これはdisabledにした時点でvalueはカラになったような気がしますが・・・

回答の条件
  • 1人5回まで
  • 13歳以上
  • 登録:2013/06/20 21:24:44
  • 終了:2013/06/21 09:26:14

ベストアンサー

id:a-kuma3 No.1

a-kuma3回答回数4524ベストアンサー獲得回数18802013/06/20 22:17:57

ポイント300pt

こんな感じかな。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
jQuery(function() {
    jQuery("input:text.x_txt").blur(function() {
        var txt1 = jQuery("input[name='name1']").val();
        var txt2 = jQuery("input[name='name2']").val();
        if (txt1 != "" && txt2 != "") {
            jQuery("input[name='label_other_entry']").attr("disabled", false);
        } else {
            jQuery("input[name='label_other_entry']").attr("disabled", true).attr("checked", false);
        }
    });
});
</script>

<input type="text" name="name1" class="x_txt"><br>
<input type="text" name="name2" class="x_txt"><br>
<label><input type="checkbox" name="check01">チェック1</label><br>
<label><input type="checkbox" name="check02">チェック2</label><br>
<label><input type="checkbox" name="label_other_entry" disabled>チェックX</label><br>

テキストボックスには、class 属性を指定して、セレクタでクラス指定をした方が、イベントの定義がひとつにできるので、書き間違いによるミスが少なくなる。


「がんばって作ってみたモノ」は、HTML の部分が分からないけど、ふたつ間違いがあると思う。

(1) セレクタの指定

例えば、"#name1 input:text" というセレクタは、「id="name1" という要素の子供の、<input type="text"> 」にマッチする。
例えば、こんなのにマッチする。

<div id="name1">
    <input type="text">
</div>

んで、こういうのにはマッチしない。

<input id="name1" type="text">

(2) jQuery.isEmptyObject() の勘違い

このメソッドが判定しているのは、テキストが空ということではない。
.val() メソッドが取り出しているのは、<input type="text"> に入力されている文字列そのものなので、比較演算子で空文字 "" と比較しなくちゃいけない。

すでにチェックボックスにチェックをいれられていた時に、テキストボックスの中身がカラになった場合、チェックボックスのチェックを外した上でdisabledにする・・・・って、これはdisabledにした時点でvalueはカラになったような気がしますが・・・

「カラになる」というか、form の submit をしたときにパラメータとして送信されない。
なので、受け取る php なり cgi なりでは、パラメータが空になる、という感じ。



もうひとつ。
Prototype.js も使ってるということだったので、混在させるときの定番。
先程のコードが、こうなる。

jQuery.noConflict();
(function($) {
    $(function() {
        $("input:text.x_txt").blur(function() {
            var txt1 = $("input[name='name1']").val();
            var txt2 = $("input[name='name2']").val();
            if (txt1 != "" && txt2 != "") {
                $("input[name='label_other_entry']").attr("disabled", false);
            } else {
                $("input[name='label_other_entry']").attr("disabled", true).attr("checked", false);
            }
        });
    });
})(jQuery);

ちまたに出回ってる jQuery ネタは、やっぱり $ で書くのが多いので、合わせておいた方が何かと便利だよね(コードのコピペとか)、ということで。
http://api.jquery.com/jQuery.noConflict/

id:ryuvay

凄く勉強になります。本当にありがとうございます。こういうスクリプト覚えたての頃ってのは、どうしてもちょっとした勘違いでドハマリすることが多いですよね。さもそれが当たり前のように考えてるから。とてもわかりやすいご指導ありがとうございます!

2013/06/21 09:16:21
id:ryuvay

言い忘れましたが、Prototype.jsの件。たしかにautokana.jsを使っており、コンフリクトでかなりハマリました。教えていただいたやりかたも実はやってみたのですが、なぜかうまくいかず、結局jQuery関連全て読み終わってからprototypeを読ませることで今のところ落ち着きました。

2013/06/21 09:33:18

その他の回答(1件)

id:a-kuma3 No.1

a-kuma3回答回数4524ベストアンサー獲得回数18802013/06/20 22:17:57ここでベストアンサー

ポイント300pt

こんな感じかな。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
jQuery(function() {
    jQuery("input:text.x_txt").blur(function() {
        var txt1 = jQuery("input[name='name1']").val();
        var txt2 = jQuery("input[name='name2']").val();
        if (txt1 != "" && txt2 != "") {
            jQuery("input[name='label_other_entry']").attr("disabled", false);
        } else {
            jQuery("input[name='label_other_entry']").attr("disabled", true).attr("checked", false);
        }
    });
});
</script>

<input type="text" name="name1" class="x_txt"><br>
<input type="text" name="name2" class="x_txt"><br>
<label><input type="checkbox" name="check01">チェック1</label><br>
<label><input type="checkbox" name="check02">チェック2</label><br>
<label><input type="checkbox" name="label_other_entry" disabled>チェックX</label><br>

テキストボックスには、class 属性を指定して、セレクタでクラス指定をした方が、イベントの定義がひとつにできるので、書き間違いによるミスが少なくなる。


「がんばって作ってみたモノ」は、HTML の部分が分からないけど、ふたつ間違いがあると思う。

(1) セレクタの指定

例えば、"#name1 input:text" というセレクタは、「id="name1" という要素の子供の、<input type="text"> 」にマッチする。
例えば、こんなのにマッチする。

<div id="name1">
    <input type="text">
</div>

んで、こういうのにはマッチしない。

<input id="name1" type="text">

(2) jQuery.isEmptyObject() の勘違い

このメソッドが判定しているのは、テキストが空ということではない。
.val() メソッドが取り出しているのは、<input type="text"> に入力されている文字列そのものなので、比較演算子で空文字 "" と比較しなくちゃいけない。

すでにチェックボックスにチェックをいれられていた時に、テキストボックスの中身がカラになった場合、チェックボックスのチェックを外した上でdisabledにする・・・・って、これはdisabledにした時点でvalueはカラになったような気がしますが・・・

「カラになる」というか、form の submit をしたときにパラメータとして送信されない。
なので、受け取る php なり cgi なりでは、パラメータが空になる、という感じ。



もうひとつ。
Prototype.js も使ってるということだったので、混在させるときの定番。
先程のコードが、こうなる。

jQuery.noConflict();
(function($) {
    $(function() {
        $("input:text.x_txt").blur(function() {
            var txt1 = $("input[name='name1']").val();
            var txt2 = $("input[name='name2']").val();
            if (txt1 != "" && txt2 != "") {
                $("input[name='label_other_entry']").attr("disabled", false);
            } else {
                $("input[name='label_other_entry']").attr("disabled", true).attr("checked", false);
            }
        });
    });
})(jQuery);

ちまたに出回ってる jQuery ネタは、やっぱり $ で書くのが多いので、合わせておいた方が何かと便利だよね(コードのコピペとか)、ということで。
http://api.jquery.com/jQuery.noConflict/

id:ryuvay

凄く勉強になります。本当にありがとうございます。こういうスクリプト覚えたての頃ってのは、どうしてもちょっとした勘違いでドハマリすることが多いですよね。さもそれが当たり前のように考えてるから。とてもわかりやすいご指導ありがとうございます!

2013/06/21 09:16:21
id:ryuvay

言い忘れましたが、Prototype.jsの件。たしかにautokana.jsを使っており、コンフリクトでかなりハマリました。教えていただいたやりかたも実はやってみたのですが、なぜかうまくいかず、結局jQuery関連全て読み終わってからprototypeを読ませることで今のところ落ち着きました。

2013/06/21 09:33:18
id:Cherenkov No.2

Cherenkov回答回数1503ベストアンサー獲得回数4932013/06/20 22:43:24

ポイント150pt
<!DOCTYPE HTML>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
  <script>
  $(function() {
    $('[name="name1"], [name="name2"]').on('load keyup', function(e) {
      if ($('[name="name1"]').val() === '' || $('[name="name2"]').val() === '') {
        $('#label_other_entry').attr('disabled', true);
      } else {
        $('#label_other_entry').removeAttr('disabled');
      }
    });
  });
  </script>
  <style>
  </style>
</head>
<body>
  <input type="text" name="name1">
  <input type="text" name="name2">
  <input id="label_other_entry" type="checkbox" disabled>
</body>
</html>
id:ryuvay

onを使っていることと、removeAttrを使っている点、勉強になります。こういった記述の仕方もあるんですね。
KeyUPのトリガーの記述も勉強になりました。
ただ、同ページの別のスクリプトでKeyUPを激しくイベントハンドラとして使っている部分があったので避けてました。
あと、気になったのはif文の||ですが、&&では?と思ったのですが・・・。
とても勉強になりましたありがとうございます。

2013/06/21 09:24:17
id:Cherenkov

if文は条件を逆にしているので処理は同じはずです。

2013/06/21 23:38:17

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません