RadioButtonList每次都不会触发SelectedIndexChanged

Question

我有一个RadioButtonList,带有"Not Applicable","Not Available","Leave"和"Available"选项.

1. 我在服务器端的RadioButtonList中单击"离开"时抛出确认消息框,如下所示

   protected void rdlUser_SelectedIndexChanged(object sender, EventArgs e)
   {
       radWindowManager.RadConfirm("Are you sure you want to take leave?", "confirmLeave" + this.ClientID, 300, 100, null, "");
   }
   

2. 如果用户点击"取消",它将自动选择"可用",代码如下.

以下是"Ok"或"Cancel"离开的javascript代码.

    function confirmLeave<%=this.ClientID%>(arg) {
        if (arg == true) {
            alert("User has selected Leave.")
        }    
        else {
            var rdlUser = docment.getElementById("<%= rdlUser.ClientID %>");
            var radioButtons = rdlUser.getElementsByTagName('input');
            radioButtons[1].checked = true;
        }
    }

如果用户第二次单击"离开",则SelectedIndexChanged根本不会触发.

我也很灵活地将服务器端代码移动到客户端.

更新

以下是相关的HTML代码

<table id="ctl00_ContentPlaceHolder1_MyUser_MyMonday_rdlUser">
<tr>
    <td><span class="leave"><input id="ctl00_ContentPlaceHolder1_MyUser_MyMonday_rdlUser_0" type="radio" name="ctl00$ContentPlaceHolder1$MyUser$MyMonday$rdlUser" value="SLOT01" disabled="disabled" onclick="javascript:setTimeout(&#39;__doPostBack(\&#39;ctl00$ContentPlaceHolder1$MyUser$MyMonday$rdlUser$0\&#39;,\&#39;\&#39;)&#39;, 0)" /><label for="ctl00_ContentPlaceHolder1_MyUser_MyMonday_rdlUser_0">Not Applicable</label></span></td>
    <td><span class="leave"><input id="ctl00_ContentPlaceHolder1_MyUser_MyMonday_rdlUser_1" class="Leave" type="radio" name="ctl00$ContentPlaceHolder1$MyUser$MyMonday$rdlUser" value="SLOT02" onclick="javascript:setTimeout(&#39;__doPostBack(\&#39;ctl00$ContentPlaceHolder1$MyUser$MyMonday$rdlUser$1\&#39;,\&#39;\&#39;)&#39;, 0)" /><label for="ctl00_ContentPlaceHolder1_MyUser_MyMonday_rdlUser_1">Not Available</label></span></td>
</tr><tr>
    <td><span class="leave"><input id="ctl00_ContentPlaceHolder1_MyUser_MyMonday_rdlUser_2" class="Leave" type="radio" name="ctl00$ContentPlaceHolder1$MyUser$MyMonday$rdlUser" value="SLOT03" onclick="javascript:setTimeout(&#39;__doPostBack(\&#39;ctl00$ContentPlaceHolder1$MyUser$MyMonday$rdlUser$2\&#39;,\&#39;\&#39;)&#39;, 0)" /><label for="ctl00_ContentPlaceHolder1_MyUser_MyMonday_rdlUser_2">Leave</label></span></td>
</tr><tr>
    <td><span class="available"><input id="ctl00_ContentPlaceHolder1_MyUser_MyMonday_rdlUser_3" class="Available" type="radio" name="ctl00$ContentPlaceHolder1$MyUser$MyMonday$rdlUser" value="SLOT04" checked="checked" /><label for="ctl00_ContentPlaceHolder1_MyUser_MyMonday_rdlUser_3">Available</label></span></td>
</tr>

更新2

我被困在这里 - 我需要将RadioButtonList的this.ClientID指向jQuery的$ this.而已.在那里我可以执行@smoksnes提供的第二个答案

更新3

如果用户选择"不可用"或"离开",那么它应该抛出错误消息"你想要离开吗？" 如果他选择"取消",那么RadioButtonList的选择应该指向"可用".否则应相应选择"不可用"或"离开".

Answer 1

因为您愿意将代码移动到客户端的 id\xc3\xa9a 。删除OnSelectedIndexChange单选按钮上的 来跳过回发。你应该能够做这样的事情：

\n\n

// Put this in a script-tag.\n$(document).ready(function(){\n    $(\'#<%=this.ClientID%>\').change(function(){\n        var radioBtnId = this.id;\n        radconfirm(\'Are you sure you want to take leave?\', function(arg){\n            if (arg == true) {\n                alert("User has selected Leave.")\n            }    \n            else {\n                var rdlUser = docment.getElementById(radioBtnId);\n                var radioButtons = rdlUser.getElementsByTagName(\'input\');\n                radioButtons[1].checked = true;\n            }\n         }\n        });\n    });\n})\n

\n\n

下面是使用 id 而不使用服务器代码的片段。

\n\n

\r\n

\r\n

// Put this in a script-tag.\n$(document).ready(function(){\n    $(\'#<%=this.ClientID%>\').change(function(){\n        var radioBtnId = this.id;\n        radconfirm(\'Are you sure you want to take leave?\', function(arg){\n            if (arg == true) {\n                alert("User has selected Leave.")\n            }    \n            else {\n                var rdlUser = docment.getElementById(radioBtnId);\n                var radioButtons = rdlUser.getElementsByTagName(\'input\');\n                radioButtons[1].checked = true;\n            }\n         }\n        });\n    });\n})\n

\r\n

$(\'#radio1\').change(function(e){\r\n  var radioBtnId = this.id;\r\n  var $this = $(this);\r\n  radconfirm(\'Are you sure you want to take leave?\', function(arg){\r\n    // Not really sure what you want to do here...\r\n    if (arg == true) {\r\n      alert("User has selected Leave.")\r\n    }    \r\n    else {\r\n      // Select "Available instead".\r\n      $this.siblings(\'input\').prop(\'checked\',true);\r\n      \r\n      // Unselect "Leave"\r\n      \r\n      // With javascript\r\n      var rdlUser = document.getElementById(radioBtnId);              \r\n      rdlUser.checked = false;\r\n      \r\n      // With jQuery\r\n      $this.prop(\'checked\', false);\r\n    }\r\n  });\r\n});\r\n    \r\n// Mocked for now...\r\nfunction radconfirm(value, callback){\r\n  var result = confirm(value);\r\n  callback(result);\r\n}

\r\n

\r\n

\r\n

\n\n

更新： \n我已更新脚本以适应新的 HTML。在这里，我们将事件绑定到星期一控件。请注意，您可能希望CssClass在控件上设置 a 而不是使用 ID。然后您可以对所有控件（MyMonday、MyTuesday 等）使用相同的脚本。它看起来像这样：

\n\n

<asp:MyControl CssClass="day-control" runat="server" id="MyMondayControl" />\n

\n\n

如果是这样，您应该能够更改以下脚本：

\n\n

$(\'.day-control input\').change....\n

\n\n

否则您需要使用 clientID。

\n\n

$(\'#<% MyMondayControl.ClientID %> input\').change ....\n

\n\n

\n

不知道为什么在 HTML 中添加 onclick="javascript:setTimeout"

\n

\n\n

那是因为您正在将服务器控件用于AutoPostBack单选按钮。删除它，你应该没问题。在这个问题中阅读更多相关信息。

\n\n

在下面的代码片段中，我擅自将 CSS 类分配给不同的单选按钮。人们将确定何时运行“检查是否离开”脚本。一是知道如果用户选择留下来选择哪个单选按钮。CSS 类是leave-check和select-if-not-leave。您可以将它们添加到CssClass属性中。

\n\n

您可能还想检查呈现的 HTML 内容。您提供的 HTML 正在table与 一起使用tr，因此只需确保 css-class 实际上在input. 否则您将需要调整选择器。

\n\n

\r\n

\r\n

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>\r\n<input type="radio" name="radios" id="radio1" value="Leave"/> <label for="radio1" >Leave</label>\r\n<input type="radio" name="radios" id="radio2" value="Available"/> <label for="radio2" >Available</label>

\r\n

<asp:MyControl CssClass="day-control" runat="server" id="MyMondayControl" />\n

\r\n

\r\n

\r\n

\n\n

更新2：

\n\n

\n

\n
1. 当我在 Day UserControl 中编写 jQuery 脚本时，我只能使用 .leave 和 .available 类，但不能使用 .day-control。2. 当我在 UserControl 中编写 jQuery 脚本（其中声明了 MyMonday、MyTuesday、...\n MyFriday）时，我只能使用 .day-control 而不能使用 .leave\n 和 .available 类。@smoksnes 请解决这个歧义。
\n

\n

\n\n

只要脚本看起来相同，脚本放在哪里并不重要。最好将其与其他脚本一起放在 js 文件中。以下是脚本和jQuery 选择器如何工作的一些信息：

\n\n

如果您使用.day-control span.available input它，它将首先查找带有css class 的 某个元素，然后查找带有 css-classday-control的元素，最后查找. 如果有几个元素满足我刚才提到的标准，它将返回所有这些元素。该脚本应该只呈现一次，因为它将捕获所有事件，因为它们都共享相同的 css 类。spanavailableinputspanDayUserControlday-control

\n\n

但是，如果您使用#<%=this.ClientID%> span.leave input它，它将首先查找具有特定 id ( this.ClientID) 的元素，并且应该只有其中之一。这就是为什么您需要为每个 渲染一次 DayUserControl该特定脚本，因为它对于该特定用户控件来说是唯一的。

\n