2015-11-02 5 views
0

У меня есть веб-форма asp.net, и я хочу, чтобы моя кнопка отправки была отключена, если мой asp:TextBox пуст, и для моего asp:RadioButton не было сделано никакого выбора.Отключить кнопку, когда Asp: TextBox Empty & no asp: RadioButton Selected

В настоящее время у меня есть следующие за моего поля, но я не знаю, как я могу присоединиться к этому для радиокнопок

JQuery

$(document).ready(function() 
     { 
      $("#MainContent_btnRemoveUser").prop('disabled', true); 
      $("#MainContent_btnAddUser").prop('disabled', true); 
     }); 

     // Disables 'Remove' button unless all fields popluted 
     $("#MainContent_txtRemoveUser").on("change", function() 
     { 
      if ($('#MainContent_txtUsername').val()) 
      { 
       $("#MainContent_btnRemoveUser").prop('disabled', false); 
      } 
      else 
      { 
       $("#MainContent_btnRemoveUser").prop('disabled', true); 
      } 
     }); 

HTML

 <div class="form-group">   
      <asp:Label runat="server" AssociatedControlID="txtRemoveUser" CssClass="col-sm-offset-2 col-sm-3 control-label">Enter Name To Be Removed</asp:Label> 
      <div class="col-sm-3"> 
       <asp:TextBox runat="server" ID="txtRemoveUser" CssClass="form-control" /> 
      </div> 
     </div> 
     <div class="form-group"> 
      <asp:Label runat="server" CssClass="col-sm-offset-2 col-sm-3 control-label"> 
       <b>Request For</b> 
      </asp:Label> 
      <div class="col-sm-3"> 
       <label class="radio-inline"> 
        <asp:RadioButton runat="server" ID="rbRemoveYourself" GroupName="RemoveRequestFor" /> Myself 
       </label> 
       <label class="radio-inline"> 
        <asp:RadioButton runat="server" ID="rbRemoveOtherUser" GroupName="RemoveRequestFor" /> Other user 
       </label> 
      </div> 
     </div> 
     <div class="row"> 
      <div class="col-sm-offset-8 col-sm-3" style="padding-left: 0px"> 
       <asp:Button ID="btnRemoveUser" runat="server" Text="Remove From The List" CssClass="btn btn-danger" ToolTip="Click to remove the specified user from the payday lunch list." /> 
      </div> 
     </div> 

ответ

1

Там вы идете! добавлена ​​новая функция для отключения кнопки и будет вызвана размытием для текстового поля и сменой для переключателей.

HTML

<div class="form-group">   
       <asp:Label runat="server" AssociatedControlID="txtRemoveUser" CssClass="col-sm-offset-2 col-sm-3 control-label">Enter Name To Be Removed</asp:Label> 
       <div class="col-sm-3"> 
        <asp:TextBox runat="server" ID="txtRemoveUser" CssClass="form-control" /> 
       </div> 
      </div> 
      <div class="form-group"> 
       <asp:Label runat="server" CssClass="col-sm-offset-2 col-sm-3 control-label"> 
        <b>Request For</b> 
       </asp:Label> 
       <div class="col-sm-3"> 
        <label class="radio-inline"> 
         <asp:RadioButton runat="server" ID="rbRemoveYourself" GroupName="RemoveRequestFor" /> Myself 
        </label> 
        <label class="radio-inline"> 
         <asp:RadioButton runat="server" ID="rbRemoveOtherUser" GroupName="RemoveRequestFor" /> Other user 
        </label> 
       </div> 
      </div> 
      <div class="row"> 
       <div class="col-sm-offset-8 col-sm-3" style="padding-left: 0px"> 
        <asp:Button ID="btnRemoveUser" runat="server" Text="Remove From The List" CssClass="btn btn-danger" ToolTip="Click to remove the specified user from the payday lunch list." /> 
       </div> 
      </div> 

JavaScript

<script> 
     $(document).ready(function() { 
      $("#MainContent_btnRemoveUser").prop('disabled', true); 
      $("#MainContent_btnAddUser").prop('disabled', true); 
     }); 

     $("#MainContent_txtRemoveUser").on("blur", function() { 
      disableButton(); 
     }); 

     $("#MainContent_rbRemoveYourself").change(function() { 
      disableButton(); 
     }); 

     $("#MainContent_rbRemoveOtherUser").change(function() { 
      disableButton(); 
     }); 

     // Disables 'Remove' button unless all fields popluted 
     function disableButton() { 

      var isRbRemoveSelfChecked = $("#MainContent_rbRemoveYourself").is(':checked') 

      var isRbRemoveOtherChecked = $("#MainContent_rbRemoveOtherUser").is(':checked') 

      if ($('#MainContent_txtRemoveUser').val() != '' && (isRbRemoveSelfChecked || isRbRemoveOtherChecked)) { 
       $("#MainContent_btnRemoveUser").prop('disabled', false); 
      } 
      else { 
       $("#MainContent_btnRemoveUser").prop('disabled', true); 
      } 
     } 
    </script> 
+0

Все, что происходит, это то задница, когда я ввел текст в поле «txtRemoveUser», кнопка становится включенной без меня, чтобы выбрать радиокнопку – murday1983

+0

Измените условие с OR на AND. Измените событие, а затем на размытие вместо изменения. – Moe

+0

Я изменил ответ. Дайте мне знать, если это поможет. – Moe

0

Try заменяя if ($('#MainContent_txtUsername').val()) на if ($('#MainContent_txtUsername').val() != '')

Для переключателя радиоприемника не проверяйте состояние на onchange и напишите такую ​​же логику.

1

Это должно дать вам ожидаемый результат: -

$('input[name="RemoveRequestFor"]').change(function() { 
    if($("#MainContent_txtUsername").val().trim() != "") 
     $("#MainContent_btnAddUser").prop('disabled', false); 
}); 

$("#MainContent_txtUsername").blur(function() { 
    if($('input[name="RemoveRequestFor"]:checked').length > 0) 
     $("#MainContent_btnAddUser").prop('disabled', false); 
}); 

Кроме того, вы можете использовать функцию keyup вместо blur, чтобы сделать вашу форму более отзывчивой.

+1

Это намного чище, чем мой собственный ответ, и результат тот же! – Moe

Смежные вопросы