- PR -

C#とJavaScriptの関係(CheckBoxのdisabledプロパティ設定)

1
投稿者投稿内容
モン吉君
会議室デビュー日: 2006/06/26
投稿数: 16
投稿日時: 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
burton999
ぬし
会議室デビュー日: 2003/10/06
投稿数: 898
お住まい・勤務地: 東京
投稿日時: 2006-06-26 18:07
ASP.NETのCheckBoxコントロールは

<span disabled="disabled"><input id="CheckBox1" type="checkbox" name="CheckBox1" disabled="disabled" /></span>

のようにspanで囲まれて出力されます。
なので、このspanもdisabledの設定をする必要があります。

コード:
function SetTrue()
{
	var check1 = window.document.getElementById("CheckBox1");
	check1.disabled = true;
	check1.parentElement.disabled = true;
}
function SetFalse()
{
	var check1 = window.document.getElementById("CheckBox1");
	check1.disabled = false;
	check1.parentElement.disabled = false;
}

モン吉君
会議室デビュー日: 2006/06/26
投稿数: 16
投稿日時: 2006-06-26 19:03
burton999殿、ご回答ありがとうございました。
ご指導頂いた通り実行して問題解決致しました。
JavaScriptを詳しく分かっていなかったので、とても悩んでいました。(別の方法で行っておりました)
ありがとうございました。
失礼します。
モン吉君
会議室デビュー日: 2006/06/26
投稿数: 16
投稿日時: 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

かえで殿が発言している以下の内容が気になります...
引用:
サーバーでのEnable設定とクライアントでのdisable設定。。。
競合して使うことは出来ないと思います。
例えば、サーバーサイドにてVisible=Falseにしたものをクライアントサイドでvisibility(もしくはDisplay)制御できないですよね?



よろしくお願い致します。
モン吉君
会議室デビュー日: 2006/06/26
投稿数: 16
投稿日時: 2006-06-28 15:16
追加情報です。

■JavaScriptによる処理で終了する場合、checked属性が期待しない結果になります。
(表示上は問題ありません。下記のようにItemからCheckBox2を取得してみると期待しない値になっています)

コード:
CheckBox CheckBoxDHCP = (CheckBox)DataGrid.Items[ItemCnt].FindControl("CheckBox2");



期待しない値を取得してDBに書き込むため、最終的にはDataBindすると設定とは異なる表示が行われます。

■JavaScirptによる処理後、DataGrid上でCheckBoxをクリックすると正常動作します。
※CheckBox2のAutoPostBackはfalseになっています。
 このタイミングでC#の処理は行われていません。

なお、JavaScriptの処理を行わない場合(CheckBox2のみをクリック)は正常に動作致します。

はやり、C#が自動的に行っている処理との差分が発生して、C#の処理と異なる結果が出ているのでしょうか?

よろしくお願い致します。
モン吉君
会議室デビュー日: 2006/06/26
投稿数: 16
投稿日時: 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

スキルアップ/キャリアアップ(JOB@IT)