切羽詰まってます。なにとぞお願いします。m(__)m

ALLと付けた あるチェックボックスをチェックすると、
その下にある配置した リストボックスが選択できなく
なるか ( disabled ) もしくは、リストボックスの
1行目をのぞいて(選択してください、メッセージがある)
全部選択された状態になる、スクリプトはどう書けば
いいんでしょう。
本を何冊か買っていろいろみているんですが、具体例が
載ってなくほとほと弱っています。

このQ&Aに関連する最新のQ&A

A 回答 (2件)

先ほどの回答に補足です。


スプリクトの中に、disabledを付け足すと、選択できなくなります。
-----
function clickCheck() {
document.Myform.test_select1.selectedIndex = 1;
document.Myform.test_select2.selectedIndex = 1;
document.Myform.test_select1.disabled = true;
document.Myform.test_select2.disabled = true;
}
    • good
    • 0
この回答へのお礼

ありがとうございます。
リストボックスにもうまく応用できました。
期待通りの効果です。
感謝いたします。(2時間以上悩んだ)
20point じゃあお礼が言い足りないくらいです。

お礼日時:2001/06/29 23:12

質問に対する回答になるかちょっと分かりませんが…


チェックボックスをチェックすると、selectボックスが
選択されるようにしてみました。
---------
<html>
<head>
<SCRIPT LANGUAGE="JavaScript">
function clickCheck() {
document.Myform.test_select1.selectedIndex = 1;
document.Myform.test_select2.selectedIndex = 1;
}
</SCRIPT>
</head>
<body>
<FORM NAME="Myform">
<input type="checkbox" name="ALL" value="1" onClick="clickCheck()">ALL選択

<BR><BR>
<select name="test_select1">
<option value="0">--選択してください--</option>
<option value="1">テスト1-1</option>
<option value="2">テスト1-2</option>
<option value="3">テスト1-3</option>
</select>
<BR><BR>
<select name="test_select2">
<option value="0">--選択してください--</option>
<option value="1">テスト2-1</option>
<option value="2">テスト2-2</option>
<option value="3">テスト2-3</option>
</select>

</FORM>
</body>
</html>
    • good
    • 0

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aと関連する良く見られている質問

Qチェックボックスの取得数値で別のチェックボックスを選択可能に

こんにちは、初めて利用させていただきます。

Javascriptを利用し、下記URLのようなものを作成中です。
http://mag.morirepo.com/test_skill.html
それぞれのテーブルごとに段階を設け、「次の段階に進むためには2ポイント以上消費しなければチェックボックスが表示されない」といったものにしたいのですが、上手くスクリプト書けませんでした。

FirefoxとIEで動作させたいと思っています。
よろしくお願いします。

Aベストアンサー

(1)ご提示のソースの構成という条件で、<table>内の<input>要素は全て
  チェックボックスであると仮定し、そのチェックは省略しています。
(2)同じ段階の項目はinputのname属性が同じであるということを利用して  
  判定しています。 (なので、ご提示の「至近距離技能」のところは
  正しく動作しません。=全部同じnameになっている)
(3)ソースの「onClick="ttlValue()"」と「disabled」の設定は繰り返しが
  多いので、省略できるようにしました。
  下のサンプルのようにすることが可能です。
  (formに代表してonclickを設定しています。)
  (オンロード時に、非表示とdisabledをセットするようにしています)
(4)非表示にしてかつdisabledにするのかどうか不明でしたので(非表示
  だけでもことたりるのか)、一応、disabledにもにしていますが、不要
  ならばはずしてください。
  また、非表示にした時にチェックされている内容をクリアするのか
  どうかも不明でしたので、チェックはそのままです。クリアしたい
  場合は、コメントアウトしてある部分を有効にしてください。
(5)クリックされたらttlValue()が続いて実行されるようになっていますが、
  ttlValue()でやりたいことが良くわからなかったので、とりあえずダミー
  のfunctionになっています。 function ttlValue() を置き換えれば
  そのまま機能するはずです。
  最後の<select>の「onChange="ttlValue()"」は省略できませんので、
  そのまま残しておいてください。

以下、サンプルです。(短くするため、2項目のみに減らしてあります。)
<html>
<head>
<script type="text/javascript">
window.onload = function() {
var i, p = document.getElementById('tableBox').getElementsByTagName('TABLE');
for (i=0; i<p.length; i++) check(p[i]);
}

function test(evt) {
var t = evt.target || evt.srcElement;
if (t.nodeName != 'INPUT' || t.type != 'checkbox') return;
var p = t.parentNode;
while (p.nodeName != 'TABLE') p = p.parentNode;
check(p);
ttlValue();
}

function check(p) {
var n, c, i = 0, e = p.getElementsByTagName('INPUT');
while (e[i]) {
n = e[i].name;
c = 0;
while (e[i] && e[i].name == n) {
if (e[i].checked) c += parseInt(e[i].value);
e[i].disabled = false;
e[i++].style.visibility = 'visible';
}
if (c<2) while (e[i]) {
//e[i].checked = false; //一度消えたらチェックも消す場合
e[i].disabled = true;
e[i++].style.visibility = 'hidden';
}
}
}

function ttlValue() { return; } //←省略しています
</script>
</head>

<body>

<form name="skillForm" onclick="test(event)">
<div id="tableBox">
<p>( )内の数値は必要ポイントです。</p>

<h3>防御技能</h3>
<table cellspacing="0">
<tr>
<td colspan="2" class="top left dankai">第1段階</td>
<td colspan="2" class="top dankai">第2段階</td>
<td colspan="2" class="top dankai">第3段階</td>
<td class="top dankai">第4段階</td>
</tr>
<tr>
<td class="left noLineUnder green">HGリロードタイム</td>
<td class="noLineUnder green">切替速度</td>
<td class="noLineUnder yellow2">PDW</td>
<td class="noLineUnder green">連射タイム</td>
<td class="noLineUnder yellow1">サイレンサー</td>
<td class="noLineUnder green">振る速度向上</td>
<td class="noLineUnder green">リーチ拡張</td>
</tr>
<tr>
<td class="left chBox green"><i>(1)</i>
<input name="bx2Lv1" type="checkbox" value="1" /></td>
<td class="chBox green"><i>(1)</i>
<input name="bx2Lv1" type="checkbox" value="1" /></td>
<td class="chBox yellow2"><i>(3)</i>
<input name="bx2Lv2" type="checkbox" value="3" /></td>
<td class="chBox green"><i>(2)</i>
<input name="bx2Lv2" type="checkbox" value="2" /></td>
<td class="chBox yellow1"><i>(2)</i>
<input name="bx2Lv3" type="checkbox" value="2" /></td>
<td class="chBox green"><i>(2)</i>
<input name="bx2Lv3" type="checkbox" value="2" /></td>
<td class="chBox green"><i>(2)</i>
<input name="bx2Lv4" type="checkbox" value="2" /></td>
</tr>
</table>

<h3>身体技能</h3>
<table cellspacing="0">
<tr>
<td colspan="3" class="top left dankai">第1段階</td>
<td colspan="3" class="top dankai">第2段階</td>
<td colspan="2" class="top dankai">第3段階</td>
<td class="top dankai">第4段階</td>
</tr>
<tr>
<td class="left noLineUnder green">衝突抵抗度</td>
<td class="noLineUnder green">探知力向上</td>
<td class="noLineUnder green">ダッシュ回復力増加</td>
<td class="noLineUnder green">上級空挺部隊</td>
<td class="noLineUnder green">隠密性向上</td>
<td class="noLineUnder green">持久力増加</td>
<td class="noLineUnder green">科学攻撃抵抗度</td>
<td class="noLineUnder green">爆発への抵抗</td>
<td class="noLineUnder green">体力増加</td>
</tr>
<tr>
<td class="left chBox green"><i>(1)</i>
<input name="bx3Lv1" type="checkbox" value="1" /></td>
<td class="chBox green"><i>(1)</i>
<input name="bx3Lv1" type="checkbox" value="1" /></td>
<td class="chBox green"><i>(1)</i>
<input name="bx3Lv1" type="checkbox" value="1" /></td>
<td class="chBox green"><i>(2)</i>
<input name="bx3Lv2" type="checkbox" value="2" /></td>
<td class="chBox green"><i>(2)</i>
<input name="bx3Lv2" type="checkbox" value="2" /></td>
<td class="chBox green"><i>(2)</i>
<input name="bx3Lv2" type="checkbox" value="2" /></td>
<td class="chBox green"><i>(4)</i>
<input name="bx3Lv3" type="checkbox" value="4" /></td>
<td class="chBox green"><i>(4)</i>
<input name="bx3Lv3" type="checkbox" value="4" /></td>
<td class="chBox green"><i>(5)</i>
<input name="bx3Lv4" type="checkbox" value="5" /></td>
</tr>
</table>
</div>
<div id="LvPt">
Lv.<select name="ch2" onChange="ttlValue()">
<option value="1" selected>1</option>
<option value="2">2</option>
<!-- 以下省略 -->
</select>
残り<INPUT name="result" type="text" value="1" size="3" id="result" /> pt
</div>
</form>
</body>
</html>

(1)ご提示のソースの構成という条件で、<table>内の<input>要素は全て
  チェックボックスであると仮定し、そのチェックは省略しています。
(2)同じ段階の項目はinputのname属性が同じであるということを利用して  
  判定しています。 (なので、ご提示の「至近距離技能」のところは
  正しく動作しません。=全部同じnameになっている)
(3)ソースの「onClick="ttlValue()"」と「disabled」の設定は繰り返しが
  多いので、省略できるようにしました。
  下のサンプルのようにするこ...続きを読む

QチェックボックスのON/OFFに連動してラジオボタンのdisabledを解除

下記の動作をする checkfunc(); の書き方をご教示ください.


<html>
<head>
<script type="text/javascript">
checkfunc()
</script>
</head>
<body>
<form name="myform">
<input type="checkbox" name="yesno" value="1">チェックボックス
<input type="radio" name="rdo1" value="0">ラジオボタン0
<input type="radio" name="rdo1" value="1">ラジオボタン1
<input type="radio" name="rdo1" value="2">ラジオボタン2
<input type="radio" name="rdo1" value="3">ラジオボタン3
<input type="radio" name="rdo1" value="4">ラジオボタン4
</form>
</body>
</html>

(1) このHTMLのラジオボタン5つは,最初は全てdisabledです.
(2) チェックボックスがされたらラジオボタングループが有効になるようにしたいです.
(3) 逆に,チェックが外れたらラジオボタンはdisabledに戻ります.
(4) このjavascriptは,PHPファイルに組み込みますが.表示時にDBを読み込んでどれに
 チェック/選択されていたかによって,checkboxやradioに「checked」を追記します.
 その場合,enabled/disablesの関係に矛盾がないようにもしたいですが,
 <body>に onload="checkfunc();" と入れればいいでしょうか?

なお,IE以外のブラウザでも動作できると大変助かります.よろしくお願い致します.

下記の動作をする checkfunc(); の書き方をご教示ください.


<html>
<head>
<script type="text/javascript">
checkfunc()
</script>
</head>
<body>
<form name="myform">
<input type="checkbox" name="yesno" value="1">チェックボックス
<input type="radio" name="rdo1" value="0">ラジオボタン0
<input type="radio" name="rdo1" value="1">ラジオボタン1
<input type="radio" name="rdo1" value="2">ラジオボタン2
<input type="radio" name="rdo1" value="3">ラジオボタン3
<input ty...続きを読む

Aベストアンサー

litton101 さん、こんにちは。

さて litton101 さんのスクリプト、以下のように修正させていただきました。お試しあれ。

<html>
<head>
<script type="text/javascript">
function checkfunc() {

for(i=0; i<5; i++) {

document.myform.rdo1[i].disabled = !(document.myform.yesno.checked);

}

}
</script>
</head>
<body onLoad="checkfunc();">
<form name="myform">
<input type="checkbox" name="yesno" value="1" onClick="checkfunc();">チェックボックス
<input type="radio" name="rdo1" value="0">ラジオボタン0
<input type="radio" name="rdo1" value="1">ラジオボタン1
<input type="radio" name="rdo1" value="2">ラジオボタン2
<input type="radio" name="rdo1" value="3">ラジオボタン3
<input type="radio" name="rdo1" value="4">ラジオボタン4
</form>
</body>
</html>

litton101 さん、こんにちは。

さて litton101 さんのスクリプト、以下のように修正させていただきました。お試しあれ。

<html>
<head>
<script type="text/javascript">
function checkfunc() {

for(i=0; i<5; i++) {

document.myform.rdo1[i].disabled = !(document.myform.yesno.checked);

}

}
</script>
</head>
<body onLoad="checkfunc();">
<form name="myform">
<input type="checkbox" name="yesno" value="1" onClick="checkfunc();">チェックボックス
<input type="radio" ...続きを読む

Qラジオボタンを選択後、別のチェックボックスを使用できなくする方法

ラジオボタンR1・R2・R3 と チェックボックス C1・C2・C3・C4がフォームに配置されています。

1:
初期状態でR1が選択されており、さらにチェックボックスの全てが使用できない状態になっている。

2:
R2若しくはR3を選択すると、チェックボックスの全てが使用できる状態になる。

3:
改めてR1を選択すると初期状態に戻る。

以上のような動作をさせたいと思いますが、よくわかりません。
お手数ですが、ご指導ください。

Aベストアンサー

サンプルです。
参考にしてください。


<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
function r_check(){
if(document.F1.R.length){
for (var i=0; i<document.F1.R.length; i++){
if (document.F1.R[i].checked){
if(i==0){
document.F1.C1.disabled = true;
document.F1.C2.disabled = true;
document.F1.C3.disabled = true;
document.F1.C4.disabled = true;
}else if(i==1 || i==2){
document.F1.C1.disabled = false;
document.F1.C2.disabled = false;
document.F1.C3.disabled = false;
document.F1.C4.disabled = false;
}
}
}
}
}
</SCRIPT>
</HEAD>
<BODY bgcolor="#CCFFCC" onLoad="r_check()">
<FORM name="F1">
<INPUT type="radio" name="R" value="R1" onClick="r_check()" checked>R1
<INPUT type="radio" name="R" value="R2" onClick="r_check()">R2
<INPUT type="radio" name="R" value="R3" onClick="r_check()">R3

<INPUT type="checkbox" name="C1" value="C1">C1
<INPUT type="checkbox" name="C2" value="C2">C2
<INPUT type="checkbox" name="C3" value="C3">C3
<INPUT type="checkbox" name="C4" value="C4">C4
</FORM>
</BODY>
</HTML>

サンプルです。
参考にしてください。


<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
function r_check(){
if(document.F1.R.length){
for (var i=0; i<document.F1.R.length; i++){
if (document.F1.R[i].checked){
if(i==0){
document.F1.C1.disabled = true;
document.F1.C2.disabled = true;
document.F1.C3.disabled = true;
document.F1.C4.disabled = true;
}else if(i==1 || i==2){
document.F1.C1.d...続きを読む

Q【続】チェックボックスのON/OFFに連動してラジオボタンのdisabledを解除

http://oshiete1.goo.ne.jp/qa2692133.html
でご教示いただいたJSは,チェックボックスのON/OFFに連動して
ラジオボタンのdisabledを解除するものです.
ところが本番環境は次のように大量です.

Q1 □チェック ◎ラジオ1 ○ラジオ2 ○ラジオ3 ○ラジオ4 ○ラジオ5
Q2 □チェック ◎ラジオ1 ○ラジオ2 ○ラジオ3 ○ラジオ4 ○ラジオ5
  :(中略)
Q15 □チェック ◎ラジオ1 ○ラジオ2 ○ラジオ3 ○ラジオ4 ○ラジオ5

なので,Qの数(15問)だけまったく同じfunctionを連ねましたが(↓),
もっと効率よい書き方があれば教えてください.

<html>
<head>
<script>
function checkfunc1() {
for(i=0; i<5; i++) {
document.myform.rdo1[i].disabled = !(document.myform.yesno1.checked);
}
}
function checkfunc2() {
for(i=0; i<5; i++) {
document.myform.rdo2[i].disabled = !(document.myform.yesno2.checked);
}
}
</script>
</head>
<body onLoad="checkfunc1();checkfunc2();">
<form name="myform">
<input type="checkbox" name="yesno1" onClick="checkfunc1();">チェック
<input type="radio" name="rdo1">0
<input type="radio" name="rdo1">1
<input type="radio" name="rdo1">2
<input type="radio" name="rdo1">3
<input type="radio" name="rdo1">4<br>
<input type="checkbox" name="yesno2" onClick="checkfunc2();">チェック
<input type="radio" name="rdo2">0
<input type="radio" name="rdo2">1
<input type="radio" name="rdo2">2
<input type="radio" name="rdo2">3
<input type="radio" name="rdo2">4
</form>
</body>
</html>

http://oshiete1.goo.ne.jp/qa2692133.html
でご教示いただいたJSは,チェックボックスのON/OFFに連動して
ラジオボタンのdisabledを解除するものです.
ところが本番環境は次のように大量です.

Q1 □チェック ◎ラジオ1 ○ラジオ2 ○ラジオ3 ○ラジオ4 ○ラジオ5
Q2 □チェック ◎ラジオ1 ○ラジオ2 ○ラジオ3 ○ラジオ4 ○ラジオ5
  :(中略)
Q15 □チェック ◎ラジオ1 ○ラジオ2 ○ラジオ3 ○ラジオ4 ○ラジオ5

なので,Qの数(15問)だけまったく同じfunctionを連ねましたが(↓),
もっと効率よい書き...続きを読む

Aベストアンサー

こんにちは。こんなモンで どうでしょ?(↓)

<html>
<head>
<script>
function checkfunc(x) {
for(i=0; i<5; i++) {
document.myform.elements[x * 6 + i + 1].disabled = !(document.myform.elements[x * 6].checked);
}
}
function multi() {
for(x=0; x<15; x++) {
checkfunc(x);
}
}
</script>
</head>
<body onLoad="multi();">
<form name="myform">
<script>
for(i=0; i<15; i++) {
document.write("<input type='checkbox' name='yesno" + (i+1) + "' onClick='checkfunc(" + i + ");'>チェック");
for(j=0; j<5; j++) {
document.write("<input type='radio' name='rdo" + (i+1) + "'>" + j);
}
document.write("<br>");
}
</script>
<br>
</form>
</body>
</html>

こんにちは。こんなモンで どうでしょ?(↓)

<html>
<head>
<script>
function checkfunc(x) {
for(i=0; i<5; i++) {
document.myform.elements[x * 6 + i + 1].disabled = !(document.myform.elements[x * 6].checked);
}
}
function multi() {
for(x=0; x<15; x++) {
checkfunc(x);
}
}
</script>
</head>
<body onLoad="multi();">
<form name="myform">
<script>
for(i=0; i<15; i++) {
document.write("<input type='checkbox' name='yesno" + (i+1) + "' onClick='checkfunc(" + i ...続きを読む

Qプルダウンメニューに連動するチェックボックスのdisable切り換え

こんにちわ。

表記の件ですが、プルダウンメニューに連動するチェックボックスのdisableを切り換えたいと思っているのですが、なかなか上手くいきません・・・。

例えばプルダウンメニューにおいて
・食べ物
・生き物
・果物
・穀物

というようなメニューがあり、さらにチェックボックスとして
・お米
・りんご
・さかな
・みかん

というチェックボックスがあるとします。
この場合、[食べ物]を選択すると全てが選択できるようになり、[果物]を選択すると[りんご]と[みかん]以外は無効(チェックボックスの選択ができない状態)となるスクリプトを作成したいということです。

もし、先行していずれかのチェックボックスが有効になっていて、プルダウンメニューを切り換えた場合はアラートと同時にチェックボックスをリセットするようできると尚素敵です。

皆様のお知恵を拝借できればと思います。
何卒お力添えいただければ幸いです。

Aベストアンサー

検索条件が1つではないなら、やはりチェックボックスにはIDをふって
IDの管理テーブルをつくってそれでチェックする方がよいでしょう。

<script language="javascript">
function changeFunc(obj){
var v=obj.value;
var f=obj.form;
var food=new Object();
food["grain"]=new Array("rice","soba");
food["fruit"]=new Array("apple","orange");
food["meat"]=new Array("pork","fish");
food["hot"]=new Array("rice","soba","pork","fish");
food["cold"]=new Array("apple","orange");
food["red"]=new Array("apple","pork");
for(var i=0;i<f.length;i++){
if(f[i].type=="checkbox"){
if(v=="") f[i].disabled=false;
else f[i].disabled=true;
}
}

if(typeof food[v] =="undefined") return false;

for(var j in food[v]){
for(var i=0;i<f.length;i++){
if(f[i].type=="checkbox"){
if(f[i].id==food[v][j] ) f[i].disabled=false;
}
}
}
}
</script>
<form>
<select name="genre" onChange="changeFunc(this)">
<option value="">食べ物</option>
<option value="meat">生き物</option>
<option value="fruit">果物</option>
<option value="grain">穀物</option>
<option value="hot">温かい</option>
<option value="cold">冷たい</option>
<option value="red">赤い</option>
</select><br />
<input type="checkbox" value="お米" id="rice">お米<br />
<input type="checkbox" value="りんご" id="apple">りんご<br />
<input type="checkbox" value="みかん" id="orange">みかん<br />
<input type="checkbox" value="さかな" id="fish">さかな<br />
<input type="checkbox" value="豚肉" id="pork">豚肉<br />
<input type="checkbox" value="そば" id="soba">そば<br />
</form>

検索条件が1つではないなら、やはりチェックボックスにはIDをふって
IDの管理テーブルをつくってそれでチェックする方がよいでしょう。

<script language="javascript">
function changeFunc(obj){
var v=obj.value;
var f=obj.form;
var food=new Object();
food["grain"]=new Array("rice","soba");
food["fruit"]=new Array("apple","orange");
food["meat"]=new Array("pork","fish");
food["hot"]=new Array("rice","soba","pork","fish");
food["cold"]=new Array("apple","orange");
food["...続きを読む


人気Q&Aランキング

おすすめ情報