javascript - RadioButtonList 不是每次都触发 SelectedIndexChanged

Question

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

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. 如果用户点击“取消”，那么它会使用下面的代码自动选择“可用”。

以下是“确定”或“取消”离开的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

如果用户选择“Not Available”或“Leave”，那么它应该抛出错误消息“Do you want to take Leave?”如果他选择“取消”，那么 RadioButtonList 的选择应该指向“可用”。否则应相应地选择“不可用”或“离开”。

Answer 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 而没有服务器代码的片段。

$('#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。在这里，我们将事件绑定(bind)到星期一控件。请注意，您可能想要设置 CssClass 在您的控件上，而不是使用 ID。然后您可以对所有控件(MyMonday、MyTuesday 等)使用相同的脚本。它看起来像这样:

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

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

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

否则您需要使用 clientID。

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

Don't know why onclick="javascript:setTimeout" is getting added for the HTML

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

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

您可能还想检查呈现的 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:

1. When I write jQuery script in Day UserControl, then I can use only .leave and .available classes but not .day-control. 2. When I write the jQuery script in UserControl where MyMonday, MyTuesday,... MyFriday are declared, then I can use only .day-control but not .leave and .available classes. @smoksnes Please address this ambiguity.

将脚本放在哪里并不重要，只要脚本看起来相同即可。最好，您应该将它与其他脚本一起放在一个 js 文件中。这里有一些关于脚本和 jQuery selectors 的信息作品:

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

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