- PR -

ラジオボタンリストをjavascriptにて使用可・不可

1|2 次のページへ»
投稿者投稿内容
ticket
会議室デビュー日: 2004/05/18
投稿数: 4
投稿日時: 2005-01-26 18:47
お久しぶりに投稿します。

検索画面を作成していて、検索条件のラジオボタンリストは、初期表示時には使用不可（プロパティのEnabled=false）なのですが、特定の条件を選択したときに、クライアントのjavascriptにて使用可にしたいのです（disabled=false）。
しかし、以下のコードでは、使用可・不可が変化しないようです。

ご伝授お願いします。

with (document.Form1) {
if (DropDownList1.selectedIndex >= 4) {
RadioButtonList1.disabled = false;
RadioButtonList1_0.disabled = false;
RadioButtonList1_1.disabled = false;
} else {
RadioButtonList1.disabled = true;
RadioButtonList1_0.disabled = true;
RadioButtonList1_1.disabled = true;
}
}
ぼのぼの
ぬし
会議室デビュー日: 2004/09/16
投稿数: 544
投稿日時: 2005-01-26 20:31
ども、ぼのぼのです。

javascriptからアクセスするにはidまたはname属性を使います。ラジオボタンリスト内のラジオボタンのidやnameはWebサーバ側で勝手に加工されて付加されます。ブラウザに表示されたaspxを「ソースの表示」でのぞいてみると、idやnameがどうなっているか分かると思います。そこからidやnameの生成規則が見出せれば、アクセスする方法が見えてくると思います。
べる
ぬし
会議室デビュー日: 2003/09/20
投稿数: 1093
投稿日時: 2005-01-27 07:56
Formはname属性がないとアクセスできないみたいです。
name="Form1" が出力HTMLに書かれていないのが原因かもしれません。
ticket
会議室デビュー日: 2004/05/18
投稿数: 4
投稿日時: 2005-01-27 09:13
早速のお返事ありがとうございます。

htmlで見たソースは以下の通りです。
どうも「<span disabled="disabled">」のところが怪しいと思うのですが（プロパティのEnabled=trueにすると存在しないタグ）、idがついていませんし、.netで勝手に生成されます。
ここのdisabledを変更すればいけそうなのですが・・・。

またまた宜しくお願いします。

<table id="RadioButtonList1" disabled="disabled">
<tr>
<td>
<span disabled="disabled">
<input id="RadioButtonList1_0" type="radio" name="RadioButtonList1" value="1" checked="checked" disabled="disabled" />
<label for="RadioButtonList1_0">ラジオボタン１</label>
</span>
</td>
<td>
<span disabled="disabled">
<input id="RadioButtonList1_1" type="radio" name="RadioButtonList1" value="2" disabled="disabled" />
<label for="RadioButtonList1_1">ラジオボタン２</label>
</span>
</td>
</tr>
</table>
かえで
常連さん
会議室デビュー日: 2004/09/16
投稿数: 38
投稿日時: 2005-01-27 10:47
おはようございます。かえでです。

初期処理　→　プロパティにてEnable設定（サーバーサイド処理）
処理途中　→　JavaScriptでdisable制御（クライアント処理）

実装するのであれば初期処理もクライアント処理として行うべきではないかと思います。
例えば、
<Body OnLoad="Init();"　〜>
のInit()の中にて、ラジオボタンリストのdisable制御をしてみてはいかかでしょうか？
といいつつ、試してはないので解決しないのであれば、申し訳ありません。

サーバーでのEnable設定とクライアントでのdisable設定。。。
競合して使うことは出来ないと思います。
例えば、サーバーサイドにてVisible=Falseにしたものをクライアントサイドでvisibility（もしくはDisplay）制御できないですよね？

。。。って、例が悪いかな？￣◇￣；；；）



[ メッセージ編集済み 編集者: かえで 編集日時 2005-01-27 10:51 ]

[ メッセージ編集済み 編集者: かえで 編集日時 2005-01-27 10:51 ]
ticket
会議室デビュー日: 2004/05/18
投稿数: 4
投稿日時: 2005-01-27 11:03
Ticketです。
ぼのぼのさん、べるさん、かえでさん、返答ありがとうございます。

テキスト等はEnableとdisableは共存できるのですが、ラジオボタンやチェックボックスは無理みたいですね。

かえでさんの方法も考えましたが、そこだけクライアントのOnLoadにするのもどうかと思ったので、結局初期は「Enabled=true」にして、特定の条件を選択しないときにそのラジオボタンリストを選択した場合、強制的に「checked=false」に書き換え、特定の条件を選択したときにだけ、そのチェックを許可するようにしました。

かえでさんの例はわかりやすかったです。確かにその通りです。

お世話になりました。
たつごろー
ぬし
会議室デビュー日: 2004/10/25
投稿数: 496
投稿日時: 2005-01-27 11:30
どうしてもできないなら、
ラジオボタンは手書きhtmlにして、JavaScriptによって、HiddenのTextに値を埋めてやってはいかがでしょう。

_________________
たつごろー
codeseek
こみゅぷらす
ぼのぼの
ぬし
会議室デビュー日: 2004/09/16
投稿数: 544
投稿日時: 2005-01-27 12:11
ぼのぼのです。大事なことを見落としてました。

コード:

//ticketさんの書き込み（2005-01-26 18:47）より：
with (document.Form1) { 
    if (DropDownList1.selectedIndex >= 4) { 
        RadioButtonList1.disabled = false; 
        RadioButtonList1_0.disabled = false; 
        RadioButtonList1_1.disabled = false; 
    } else { 
        RadioButtonList1.disabled = true; 
        RadioButtonList1_0.disabled = true; 
        RadioButtonList1_1.disabled = true; 
    } 
}

これがjavascriptの構文として間違ってます。Form1.idとしてますよね。
Form1.nameが正しいです。また、同じグループ内のラジオボタンはnameが同じになり、同じnameの部品が複数存在する場合はformオブジェクトは配列になるので、

コード:

with (document.Form1) { 
    if (DropDownList1.selectedIndex >= 4) { 
        RadioButtonList1[0].disabled = false; 
        RadioButtonList1[1].disabled = false; 
        RadioButtonList1[2].disabled = false; 
    } else { 
        RadioButtonList1[0].disabled = true; 
        RadioButtonList1[1].disabled = true; 
        RadioButtonList1[2].disabled = true; 
    } 
}

こうするとうまくいくんじゃないでしょうか？
もしくはidを使うなら、document.allかdocument.getElementByIdを使います。

コード:

with (document) { 
    if (getElementById("DropDownList1").selectedIndex >= 4) { 
        getElementById("RadioButtonList1_0").disabled = false; 
        getElementById("RadioButtonList1_1").disabled = false; 
        getElementById("RadioButtonList1_2").disabled = false; 
    } else { 
        getElementById("RadioButtonList1_0").disabled = true; 
        getElementById("RadioButtonList1_1").disabled = true; 
        getElementById("RadioButtonList1_2").disabled = true; 
    } 
}

こんな感じ。
1|2 次のページへ»

スキルアップ／キャリアアップ（JOB@IT）