0

Htmlコントロールを使用してそのようなページをレンダリングするASP.NETページがあります（申し訳ありませんが、プログラムによるレンダリングはオフィスにあります）。

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>jQuery Radio Buttons</title>
</head>
<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<body>
<form id="form1" runat="server">
<div>
    Group 1<br />
    <input type="radio" name="Q1" id="rb1" title="Choice 1" value="false" onclick="javascript:ClickEvent(this);" /><br />
    <input type="radio" name="Q1" id="rb2" title="Choice 2" value="true" onclick="javascript:ClickEvent(this);" /><br />
    <input type="radio" name="Q1" id="rb3" title="Choice 3" value="false" onclick="javascript:ClickEvent(this);" /><br />        
    Group 2<br />
    <input type="radio" name="Q2" id="rb4" title="Choice 1" value="false" onclick="javascript:ClickEvent(this);" /><br />
    <input type="radio" name="Q2" id="rb5" title="Choice 2" value="false" onclick="javascript:ClickEvent(this);" /><br />
    <input type="radio" name="Q2" id="rb6" title="Choice 3" value="true" onclick="javascript:ClickEvent(this);" /><br />
</div>
</form>
</body>
</html>
<script type="text/javascript">
function ClickEvent(r) {

}
</script>

ClickEvent関数で行う必要があるのは、jQueryを使用してグループ（別名Name）を選択することです。次に、間違った選択肢（value = "false"）を選択した場合は、ラジオボタンの境界線を赤に変更し、常に正解の境界線を緑に変更します。次に、ボタンのグループを無効にします。

これを実現するために、関数定義に何を入れますか？私はjQueryのバックグラウンドをほとんど持っていませんが（私は前もってそれを使用するように言われました）、私が読んだことから、「それぞれ」が正しい方法かもしれないと思います。また、境界線の色を変更するためだけに、CSSクラスを使用しないように言われました。私はポストバックを使用してこれを達成することができましたが、彼らはそれがクライアント側でなければならないと言いました。誰か助けてもらえますか？

psこれがASP.NETであるという事実は、おそらく無関係です。jQueryをご存知の場合は、お気軽に回答を投稿してください。

4

1 に答える 1

0

これを試してください（目立たない方法でクリックイベントをバインドするようにマークアップとスクリプトを変更しました）：

<div>
Group 1<br />
<input type="radio" name="Q1" id="rb1" title="Choice 1" value="false" /><br />
<input type="radio" name="Q1" id="rb2" title="Choice 2" value="true" /><br />
<input type="radio" name="Q1" id="rb3" title="Choice 3" value="false" /><br />        
Group 2<br />
<input type="radio" name="Q2" id="rb4" title="Choice 1" value="false" /><br />
<input type="radio" name="Q2" id="rb5" title="Choice 2" value="false" /><br />
<input type="radio" name="Q2" id="rb6" title="Choice 3" value="true" /><br />
</div>


<script type="text/javascript"> 
    $(function(){
     $("div :radio").click(ClickEvent);
    });
    function ClickEvent(){
            var el = this;
            var $el = $(el);
            if($el.val() == "false"){
                var all = $("[name='" + $el.attr("name") + "']");
                var correctRadio = all.filter("[value='true']");
                correctRadio.wrap("<span style='border: solid Green 2px'></span>");
                $el.wrap("<span style='border: solid Red 2px'></span>");
                all.prop("disabled", true);
            } 
        }


</script>

実例： http： //jsfiddle.net/bJx5y/2/

于 2011-07-21T23:32:26.087 に答える