Отключить кнопку, если условия не соответствуют jQuery

Question

У меня есть условие, если флажок установлен, а поле электронной почты завершено с помощью @ xyz.edu, тогда кнопка отправки должна быть включена, а также, если флажок не установлен, и если адрес электронной почты поле содержит @ xyz.edu, даже тогда кнопка должна быть отключена.

<div class="input-field col s12 m10 offset-m1 offset-s2"> 
    <input id="email" name="email" th:value="${user.email}" type="email" class="validate" /> 
    <label for="email">Email</label> 
</div> 

<div class="row"> 
    <div class="input-field col s12 m10 offset-m1 offset-s2"> 
     <input id = "checkbox" name="userRole" value="ADMIN" type="checkbox" class="validate" /> 
     <label>Admin</label> 
    </div> 
</div> 

<div class="row"> 
    <div class="input-field col s12 m10 offset-m1 offset-s2"> 
     <button id="submit" class="btn waves-effect waves-light" type="submit" disabled = "disabled" name="action" value="signup">Sign Up</button> 
    </div> 
</div> 

JQuery код:

$('#checkbox').click(function(){ 

      if(this.checked) 
      { 
       var email = $('#email').val(); 
       var str = "@sjsu.edu" 
       if(email.match("@sjsu.edu$")) 
       { 

       $("#submit").removeAttr("disabled"); 
       } 
       else 
       { 
       $("#submit").attr("disabled", "disabled"); 
       } 
      } 
    }); 

Так что, когда я даю ввод как @ gmail.com и установите флажок, кнопка остается заблокированным. Теперь, если я снова изменяю только поле ввода, он включает кнопку, даже если условие не выполняется. Может кто-то помочь мне

Вот моя ссылка на код: https://jsfiddle.net/chandham/e5g0m7o9/

Answer 1

Extract код проверки в отдельную функцию - то есть код, где вы проверяете, что #checkbox проверяется и #email заканчивается @ sjsu.edu. Затем связать эту функцию для обработчиков событий для флажком и изменения событий по электронной почте, как и так:

$("#email, #checkbox").change(updateSubmitButtonState); 

function updateSubmitButtonState() { 
    // Code to validate inputs 
} 

Edit: Working JS Fiddle

Я также добавил обработчик события для события загрузки страницы, так что начинается в правильное состояние.

Answer 2

Попробуйте этот пример:

$(function() { 
 
    $('#checkbox,#email').on('input', function(e) { 
 
    var checked = $('#checkbox').is(':checked'); 
 
    var endsWith = /@xyz\.edu$/.test($('#email').val()); 
 
    $('#submit').prop('disabled', !((!checked && !endsWith) || (checked && endsWith))); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="input-field col s12 m10 offset-m1 offset-s2"> 
 
    <input id="email" name="email" value="abc@xyz.edu" type="email" class="validate" /> 
 
    <label for="email">Email</label> 
 
</div> 
 

 
<div class="row"> 
 
    <div class="input-field col s12 m10 offset-m1 offset-s2"> 
 
    <input id="checkbox" name="userRole" value="ADMIN" type="checkbox" class="validate" /> 
 
    <label>Admin</label> 
 
    </div> 
 
</div> 
 

 
<div class="row"> 
 
    <div class="input-field col s12 m10 offset-m1 offset-s2"> 
 
    <button id="submit" class="btn waves-effect waves-light" type="submit" disabled="disabled" name="action" value="signup">Sign Up</button> 
 
    </div> 
 
</div>