RadioButtonList 每次都没有触发 SelectedIndexChanged答案

【问题标题】：RadioButtonList not firing SelectedIndexChanged every timeRadioButtonList 每次都没有触发 SelectedIndexChanged
【发布时间】：2017-02-16 10:34:31
【问题描述】：

我有一个带有“不适用”、“不可用”、“离开”和“可用”选项的 RadioButtonList。

我在服务器端单击 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, "");
}

如果用户点击“取消”，那么它会自动选择“可用”，代码如下。

以下是“确定”或“取消”离开的 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 的选择应该指向“可用”。否则它应该相应地选择“不可用”或“离开”。

【问题讨论】：

可能是因为单选按钮在第一次单击后仍处于选中状态。这意味着第二次单选按钮的值不会改变。如果用户未确认，请尝试将值更改回可用。
这就是我现在正在做的事情var rdlUser = docment.getElementById("<%= rdlUser.ClientID %>"); var radioButtons = rdlUser.getElementsByTagName('input'); radioButtons[1].checked = true; 在confirmLeave 的else 部分。
尝试在客户端使用事件监听器而不是回发。像这样的东西：$('#<%=this.ClientID%>').change(function(){//code here});
能不能说的详细点？
@CPK_2011 - 是的，我将其发布为答案，因为它渴望发表评论。如果我误解了这个问题，请告诉我。

标签： javascript jquery asp.net telerik

【解决方案1】：

因为您愿意将代码移至客户端。删除单选按钮上的 OnSelectedIndexChange 以跳过回发。你应该可以这样做：

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

下面是一个使用 id 没有服务器代码的 sn-p。

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

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

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

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

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

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

否则需要使用clientID。

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

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

那是因为您正在为单选按钮使用带有AutoPostBack 的服务器控件。删除它，你应该没问题。在this question 中了解更多信息。

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

您可能还想检查呈现的 HTML。您提供的 HTML 使用 table 和 tr，因此只需确保 css 类实际呈现在 input 上。否则，您将需要调整选择器。

// Change to the id of the table instead. Something like:
// $('#<% MyMondayControl.ClientID %> input').change ....

// Here I just the ID generated in the HTML, but you shouldn't use that one.
$('#ctl00_ContentPlaceHolder1_MyUser_MyMonday_rdlUser span.leave input').change(function(e){
  e.preventDefault();
  var radioBtnId = this.id;
  var $this = $(this);
  radconfirm('Are you sure you want to take leave?', function(arg){
    // Not really sure what you want to do here...
    if (arg == true) {
      alert("User has selected Leave.")
    }    
    else {
      // Select "Available instead".
      // Here we use the css class "select-if-not-leave" to find the element which should be selected if the user decides to stay.
      var $parent = $this.closest('table') // Get the table. 
      
      // Select the available input.
      $parent.find('span.available input').prop('checked',true);
      
      // Unselect "Leave" With javascript
      var rdlUser = document.getElementById(radioBtnId);              
      rdlUser.checked = false;
      
      // Unselect "Leave" With jQuery (You only need one)
      $this.prop('checked', false);
    }
  });
});
    
// Mocked for now...
function radconfirm(value, callback){
  var result = confirm(value);
  callback(result);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="ctl00_ContentPlaceHolder1_MyUser_MyMonday_rdlUser">
  <tr>
    <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"  /><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" /><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"/><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>
</table>

更新 2：

当我在 Day UserControl 中编写 jQuery 脚本时，我只能使用 .leave 和 .available 类，但不能使用 .day-control。 2. 当我写作 UserControl 中的 jQuery 脚本，其中 MyMonday、MyTuesday、... MyFriday 已声明，然后我只能使用 .day-control 但不能使用 .leave 和 .available 类。 @smoksnes 请解决这个歧义。

你把你的脚本放在哪里并不重要，只要脚本看起来一样。最好将它与其他脚本一起放在一个 js 文件中。以下是脚本和jQuery selectors 工作原理的一些信息：

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

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

【讨论】：

您的代码需要进行一些简单的调整。如果用户选择离开，则只需要确认消息框，单击取消时，应选择“可用”，否则应为“离开”。现在它应该第二次重复同样的事情。
我这里有 2 个限制。 1. 我正在从数据库中填充 rdlUser 项目、“离开”和“可用性”。 2. 我在 UserControl 中使用这个 rdlUser。更改需要在 UserControl 中完成。
由于“#”，您提供的第一个代码 sn-p 根本不会触发更改事件。这需要一些改变。对于第二个代码 sn-p，我有 4 个 RadioButton 项目。 “离开”、“可用性”、“可用性1”和“可用性2”。这在实际场景中也不起作用。
是的，由于您提出的新条件，必须进行一些更改。使用 this.ClientID 可能有问题。我使用它是因为您当前在代码中使用了它，但您也可以使用 css-class 代替。此外，如果您希望 Availability1 等发生一些特别的事情，您将不得不稍微更改代码。
您在客户端实现所有代码的第二个答案并不适合我。它在这里与“运行代码 sn-p”一起工作。但我需要以正确的方式捕捉更改事件。你能重新审视我的问题吗？我从服务器端触发rdlUser_SelectedIndexChanged 并在javascript 中以正确的方式捕获它。我正在尝试将$this.siblings('input').prop('checked', true); var rdlAvailability = document.getElementById(radioBtnId); rdlAvailability.checked = false; $this.prop('checked', false); 放在其他部分。但这不起作用。需要一条新的/修改过的路线。

【解决方案2】：

将调用者对象传递给 radconfirm 函数。(http://docs.telerik.com/devtools/aspnet-ajax/controls/window/alert,-confirm,-prompt-dialogs/radconfirm-dialog)。

从服务器传递调用者对象 protected void rdlUser_SelectedIndexChanged(object sender, EventArgs e) { //var oConfirm = radconfirm(text, callBackFn, oWidth, oHeight, callerObj, oTitle, imgUrl); radWindowManager.RadConfirm("Are you sure you want to take leave?", "confirmLeave", 300, 100, null, ""); }

一个验证列表中所有控件的 javascript 函数。

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

我参考了文档，但我没有测试此代码希望这会有所帮助。

【讨论】：