クリアボタンの動作について

質問

ご存知の方、ご教授くださいm(__)m

現在、画面上で入力された項目を消去するためにクリアボタンを設置しています。
フォーム中の、
・通常のテキストボックスの内容：消去
・disabledのテキストボックスの内容：消去せずそのまま
・チェックボックスはchecked=falseにする
としたいと考えているのですが、javascriptでうまく動かせていません。今書いているコードは下記のようなものです。

$(document).ready(function () {
$('.buttons :button[name=clear]').click(function() {
$('.inputs :input:visible').val('');
return false;
});

これを改良してうまく動くようにすることは可能でしょうか。
よろしくお願いいたします。

回答No.2

LancerVII · ベストアンサー

こんにちは。

うまくいかないとはどのようになっていますか？

先ほどのサンプルの動作を確認できるURLです。
http://hppg.moe.hm/okwave/qa/q7954963/

Firefox,Chrome,IE8にて動作確認しています。

というか、基本的にjQuery使っていれば大体のブラウザで動きます。
(特殊なことしなければ)

補足

素早いレス、ありがとうございます。

いただいたURLのコードだと確かに問題なくいけますね。
No.1の分だと、自環境ではどの項目も消えないという状況になってしまっていました。
（HTMLの書き方が悪かったのだと思います。。）

現状、実際に入れ込む環境では
・チェックボックスのチェックは問題なく消える
・disabledなテキストボックスの内容は消えてしまう
という状況です。

・・・と思っていましたが、

$('.inputs :input:visible').val('');

という余計なスクリプトが入っていたため、disabled分まで消してしまっていたようです。

ということで、無事解決できました！

ありがとうございました！！m(__)m

回答No.1

LancerVII

こんにちは。

$('button').click ( function() {
// input type="text"だけどdisabled="disabled"のものを除いて''をセット(空白にする)
$('input[type="text"]').not('[disabled="disabled"]').val ( '' );
// input type="checkbox"のchecked属性を削除(チェックを外す)
$('input[type="checkbox"]').removeAttr ( 'checked' );
});
HTML側がどうなってるかわからなかったので勝手に作ってみたのでセレクタは調節してください。

==== HTML
<input type="text" name="n1">
<input type="text" name="n2">
<input type="text" name="n1" value="3" disabled>
<hr>
<input type="checkbox" value="2">
<input type="checkbox" value="2">
<hr>
<button type="button" name="clear">クリア</button>

補足

こんにちは。

早速の回答、ありがとうございます。

まずはいただいたサンプルを動作させてみたのですが、うまく動きませんでした。

いただいたサンプルでの想定されているブラウザを教えていただけますか？

こちらはIE8、IE9、あとできればChrome、です。

よろしくお願いいたします。m(__)m