javascript - 如何使用 Javascript/jQuery 隐藏/显示启用/禁用 HTML 元素？

Question

这是我的:

如果用户没有更新他们的电子邮件，隐藏电子邮件_again

电子邮件 ________________

ELSE 显示 email_again(电子邮件已更新)

电子邮件 ________________

再次发送电子邮件 ______________

目标

如果在 email_again 上是一个input，提交时未通过验证，我想

⁃   redirect with old input
⁃   show the label of email_again
⁃   show the input of email_again
⁃   enable email_again

其他

⁃   Redirect with old input
⁃   Give them error message that Email Again is required
⁃   show the label of email_again
⁃   show the input of email_again
⁃   enable email_again

代码

  var old_email = $("#email").val();
  $('#email').on('input', function (event) {

  var email = $(this).val();

  if (email === old_email) { 

    $('#email_again').prop('disabled', true);
    $('#email_again_label').hide();
    $('#email_again').hide();

  } else {

    $('#email_again').prop('disabled', false);
    $('#email_again_label').show();
    $('#email_again').show();

  }

}); 

</script>

有人可以帮我调整我的代码吗？或建议任何更好的选择。

Answer 1

请尝试这是否是您需要的:DEMO

HTML:

<label for="email" id="labemail">E-Mail</label>
<input id="email" name="email" type="text"/>
<label for="emailagain" id="labemailagain" style="display:none">E-Mail again</label>
<input id="emailagain" type="text" name="emailagain" style="display:none"/>
<button id="click">Click</button>

Javascript:

var a = document.getElementById('email');
var al = document.getElementById('labemail');
var bl = document.getElementById('labemailagain');
var b = document.getElementById('emailagain');
var c = document.getElementById('click');
a.addEventListener('keyup',function() {
bl.style.display = '';
b.style.display = '';
});
c.addEventListener('click',function(){

    if (a.value == b.value) {
        al.style.color = 'green';
        bl.style.color = 'green';
        alert('OK - update');
    }
    else if (a.value != '' && b.value == '')
    {
        bl.style.color = 'red';
        alert('You need to repeat your email');
    }
    else if (a.value != b.value)
    {
        bl.style.color = 'red';
        al.style.color = 'red';
        alert('E-Mails does not match');
        a.value = a.value;
        b.value = '';

    }


});