- - PR -
C#とJavaScriptの関係(CheckBoxのdisabledプロパティ設定)
1
投稿者 | 投稿内容 | ||||
---|---|---|---|---|---|
|
投稿日時: 2006-06-26 17:33
お世話になります。
ASP.NETでWebアプリを作成しております。 CheckBoxのdisabledプロパティをC#にてfalse設定にすると、 それ以降のJavaScriptの処理ではdisabledプロパティ設定が行えないのでしょうか? ・DataGridのItemとしてCheckBoxを2つ表示 ・左側のCheckBox(CheckBox1)にチェックを入れた場合、JavaScirptにて右側のCheckBoxにチェックを入れて使用不可 ・左側のCheckBox(CheckBox2)にチェックを外した場合、JavaScirptにて右側のCheckBoxに使用可 <C#> private void DataGrid_ItemDataBound(object sender, System.Web.UI.WebControls.DataGridItemEventArgs e) { switch(e.Item.ItemType) { case ListItemType.Item: case ListItemType.AlternatingItem: string sTargetID = "DataGrid__ctl" + (e.Item.ItemIndex+2); CheckBox TempDIV = (CheckBox)e.Item.Cells[CheckBox1].FindControl("CheckBox1"); // CheckBox1取得 TempDIV.Attributes["onclick"] = "Check1('" + sTargetID + "');"; // CheckBox1のonclickイベント時に「Check1」呼び出し break; default:break; } } <JavaScript> function Check1(common) { var Box1 = common + "_CheckBox1"; var Box2 = common + "_CheckBox2"; if( window.document.getElementById( Box1 ).checked == false ) { // チェックなし window.document.getElementById( Box2 ).checked = true; // チェックを入れる window.document.getElementById( Box2 ).disabled = true; // 使用不可 } else if( window.document.getElementById( Box1 ).checked == true ) { // チェックあり window.document.getElementById( Box2 ).disabled = false; // 使用可 } } 【JavaScriptにてdisabledプロパティ設定が行えない場合】 @(C#)CheckBox1.Enabled = false; A(JavaScript)window.document.getElementById(Box2).disabled =false; ※disabledプロパティ自体にはfalseおよびtrue設定が正常に行われているが、 実際の画面ではグレイアウトになっており、コントロール不可能 ※ただし、checkedプロパティ設定は実際の画面に正常に反映されています 【JavaScriptにてdisabledプロパティ設定が行える場合】 @(C#)CheckBox1.Enabled = true A(JavaScript)window.document.getElementById(Box2).disabled =true; B(JavaScript)window.document.getElementById(Box2).disabled =false; ※この場合、AおよびBは常に実行可能 よろしくお願いいたします。 ■環境 Windows Server 2000 IIS 6.0 VisualStudio.NET 2003 Webアプリ(C#) IE6.0 | ||||
|
投稿日時: 2006-06-26 18:07
ASP.NETのCheckBoxコントロールは
<span disabled="disabled"><input id="CheckBox1" type="checkbox" name="CheckBox1" disabled="disabled" /></span> のようにspanで囲まれて出力されます。 なので、このspanもdisabledの設定をする必要があります。
| ||||
|
投稿日時: 2006-06-26 19:03
burton999殿、ご回答ありがとうございました。
ご指導頂いた通り実行して問題解決致しました。 JavaScriptを詳しく分かっていなかったので、とても悩んでいました。(別の方法で行っておりました) ありがとうございました。 失礼します。 | ||||
|
投稿日時: 2006-06-28 13:42
burton999殿の方法でdisabled設定は解決致しましたが、checked設定の動作がおかしい時があります。
C#にてcheckedプロパティをtrue設定した状態でCheckBoxをクリックすることにより、JavaScriptにてcheckedプロパティをfalse設定にします。 画面上も問題なくチェック表示されています。 しかし、いざDataGridのItemからCheckBox2を取得してみるとtrue設定のままです。 [失敗時のHTMLコード] <span disabled="disabled" style="width:30px;"><input id="DataGrid__ctl8_CheckBox2" type="checkbox" name="DataGrid:_ctl8:CheckBox2" checked="checked" disabled="disabled" /></span> [成功時のHTMLコード] <span disabled="disabled" style="width:30px;"><input id="DataGrid__ctl8_CheckBox2" type="checkbox" name="DataGrid:_ctl8:CheckBox2" disabled="disabled" /></span> 失敗時には、inputタグのchecked属性が"checked"のままになっています。 また、この逆の場合もあり、checked=trueを期待しているのに、checked属性が存在しない場合があります。 全ての処理をC#で行う場合は問題ありませんが、JavaScriptと競合すると動作がおかしくなります。 inputタグにchecked属性を付け加えるのに条件などはあるのでしょうか? (C#では、自動で行っているだけで、JavaScriptで吐き出すためにはさらに必要な処理があるなど・・・) ※ちなみに、「<asp:〜」のcheckedは、DataBinder.EvalでDBに登録されている情報を引っ張ってきています ■検索方法を変えて調べていたら、似たようなスレッドがありました http://www.atmarkit.co.jp/bbs/phpBB/viewtopic.php?topic=18474&forum=7 かえで殿が発言している以下の内容が気になります...
よろしくお願い致します。 | ||||
|
投稿日時: 2006-06-28 15:16
追加情報です。
■JavaScriptによる処理で終了する場合、checked属性が期待しない結果になります。 (表示上は問題ありません。下記のようにItemからCheckBox2を取得してみると期待しない値になっています)
期待しない値を取得してDBに書き込むため、最終的にはDataBindすると設定とは異なる表示が行われます。 ■JavaScirptによる処理後、DataGrid上でCheckBoxをクリックすると正常動作します。 ※CheckBox2のAutoPostBackはfalseになっています。 このタイミングでC#の処理は行われていません。 なお、JavaScriptの処理を行わない場合(CheckBox2のみをクリック)は正常に動作致します。 はやり、C#が自動的に行っている処理との差分が発生して、C#の処理と異なる結果が出ているのでしょうか? よろしくお願い致します。 | ||||
|
投稿日時: 2006-06-29 11:58
いつもお世話になっております。
どうやら、JavaScriptの方でdisalbedプロパティをいじるとCheckBoxコントロールへのcheckedプロパティ設定が無効になってしまうようです。 (disabledをtrue/falseは関係なく、disabledを設定する時点で無効になると思われます) そのため、以下の案が実現するに有効かと思います。 @JavaScript処理後に、(ASPにて)取得処理⇒DataBind⇒(ASPにて)取得処理 ⇒JavaScriptを通さずに、ASP側の処理にて再取得すると取得可能でした (ただ、ムダ処理になってしまいますが) ACheckBox2のonclickに、CheckBox1が有効ならばCheckBox2にchecked=true処理をJavaScriptにて行う ⇒グレイアウトにならないので、見た目上は悪いです 今回は、OnCheckedChangedを使って全てC#にて処理を行うようにしました。 以上です。 このスレッドを見て考えて下さった皆様方、どうもありがとうございました。 失礼します。 |
1