(jQuery)同じクラス名のオブジェクトを一斉操

質問

jQueryで同じクラス名のオブジェクトを一斉操作するにはどうしたら良いでしょうか？

【したいこと】
３つのチェックボックスのいずれかにチェックを入れると
disabledである「お問合わせ」と「お申込み」ボタンがクリックできるようにしたいです。
１つでもチェックが入っていなければボタンはdisabledにしたいです。

【現状】
３つのチェックボックスの１番上のclass="foo"のみクリックすると動作します。

▼【　HTML　】

<input type="checkbox" class="foo">
<input type="checkbox" class="foo">
<input type="checkbox" class="foo">

<input type="submit" class="bar" value="お問合わせ">
<input type="submit" class="bar" value="お申込み">

▼【　jQuery　】

// アクセス時はボタンは無効にする。
$(document).ready(function(){
　　$('.bar').attr('disabled', true);
});

// チェックボックスクリックアクション
$('.foo').click(function() {

　　$('.bar').each(function() {
　　　　if($('.foo').prop('checked') == true) {
　　　　　　$('.bar').attr('disabled', false);
　　　　} else {
　　　　　　$('.bar').attr('disabled', true);
　　　　}
　　});
});

ご教授の程どうぞ宜しくお願い致しますm(__)m

回答No.2

sanzero · ベストアンサー

チェックしたチェックボックスの数とチェックボックスの総数が
同じかどうかというフラグで判断すると記述が短くて済みます。

$(".foo").click(function(){
var disabled_flg = $(".foo:checked").length !== $(".foo").length;
$(".bar").prop("disabled", disabled_flg);
});

お礼

ご回答有難う御座います！
こちら下記の様にすることで思い描いていた動きになりました！

$(document).ready(function(){
　if($(".foo:checked").length) {
　　$(".bar").prop("disabled", false);
　} else {
　　$(".bar").prop("disabled", true);
　}
});

$(".foo").click(function(){
　var disabled_flg = $(".foo:checked").length;

　if (disabled_flg) {
　　$(".bar").prop("disabled", false);
　} else {
　　$(".bar").prop("disabled", true);
　};
});

果たしてこちらが正しいかどうか分かりませんが、参考になるソースを頂き勉強になりました。

No1,No2を両方ベストアンサーにすることは出来ないのですね。(*_*;
こちら一番少ない記述で分かりやすかったのでベストアンサーにしたいと思います。（pringlezさん、申し訳ないです。）

jQueryを始めたばかりで全くの初心者ですが又ご質問するかもしれません。
その際は恐れ入りますがどうぞ宜しくお願い致します！m(__)m

回答No.1

pringlez

$(document).ready(function(){
　　$('.bar').prop('disabled', true);
});

$('.foo').click(function() {
　　if ($('.foo').eq(0).prop('checked') && $('.foo').eq(1).prop('checked') && $('.foo').eq(2).prop('checked')) {
　　　　$('.bar').prop('disabled', false);
　　} else {
　　　　$('.bar').prop('disabled', true);
　　}
});

こういうことでしょうか。値のセットはまとめてできるけど、チェックされているかどうかは一つ一つ判断しないとダメです。

あと、disabledのセットはattrでも一応動きますが、本来の文法上はpropが正しいです。理解不足の初心者だと思われるのでpropを使うようにしたほうがいいでしょう。

jQuery propとattr - instant tools
http://tools.m-bsys.com/ex/attr-prop.php

お礼

ご回答有難う御座います！

eq(index)で１つ１つチェックという方法もあるのですね。
こちら勉強になりました。

ぐぐってみると、 Attr()でdisabledを付加させたり、removeAttr()で削除させたりという記事があるのですがよく見ると文法が違っていました。
こちら正しい記述方法をレクチャー頂きまして有難う御座います。m(__)m

解決後のソースはこのようになりました。
ご提示頂きましたeq()の使い方も今後使用する機械がありそうなので学習したいと思います。

果たしてこちらが正しいかどうか分かりませんが^^;

$(document).ready(function(){
　if($(".foo:checked").length) {
　　$(".bar").prop("disabled", false);
　} else {
　　$(".bar").prop("disabled", true);
　}
});

$(".foo").click(function(){
　var disabled_flg = $(".foo:checked").length;

　if (disabled_flg) {
　　$(".bar").prop("disabled", false);
　} else {
　　$(".bar").prop("disabled", true);
　};
});

jQueryを始めたばかりで全くの初心者ですが又ご質問するかもしれません。
その際は恐れ入りますがどうぞ宜しくお願い致します！m(__)m