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

Question

这是我所拥有的：

如果用户不更新其电子邮件，请隐藏email_again

电子邮件_______________

ELSE 显示email_again （ 电子邮件已更新 ）

电子邮件_______________

再次发送电子邮件 _________

目标

如果email_again is input，并且在提交时fail验证，我想

⁃   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

请尝试这是否是您需要的： 演示

.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 = '';
    }

});

Answer 2

我已经为此工作过，请查看此。另请查看演示链接。

网页部分：

<div class="container">
    <div class="inputContainer" id="email_container">
        <label for="email">E-Mail</label>
        <input id="email" name="email" type="text"/>
        <span class="inputError" id="email_error"></span>
    </div>
    <div class="inputContainer displayNone" id="email_re_container">
        <label for="email_re">E-Mail Again</label>
        <input id="email_re" name="email_re" type="text"/>
        <span class="inputError" id="email_re_error"></span>
    </div>
    <div class="inputContainer" id="submit_container">
        <button id="submit_email">Submit</button>
    </div>
</div>

CSS部分：

.container {
    float: left;
    width: 180px;
}
.inputContainer {
    float: left;
    min-height: 50px;
}
.displayBlock {
    display: block;
}
.displayNone {
    display: none;   
}
.inputError {
     text-align: right;
    color: #FC0C0C;
    display: block;
    width: 95%;
    font-weight: bold;
    min-height: 15px;
}

JS部分：

$(document).ready(function(){
    $("#email").keyup(function(){
        var email_value = $("#email").val();
        if(email_value != null && email_value != undefined && email_value.trim() != "") {
            $("#email_re_container").removeClass("displayNone");
            $("#email_re_container").addClass("displayBlock");
        }
        else {
            $("#email_re_container").removeClass("displayBlock");
            $("#email_re_container").addClass("displayNone");
            $("#email_re").val("");
        }
    });
    $("#submit_email").click(function(){
        var email_value = $("#email").val();
        var email_re_value = $("#email_re").val();
        if(email_value == null || email_value == undefined || email_value.trim() == "") {
            $("#email_re_container").removeClass("displayBlock");
            $("#email_re_container").addClass("displayNone");
            $("#email_re").val("");
            $("#email").val("");
            alert("Email is Required");
        }
        else if(email_re_value == null || email_re_value == undefined || email_re_value.trim() == "") {
            $("#email_re").val("");
            alert("Email Again is Required");
        }
        else if(email_value != email_re_value) {
            $("#email_re").val("");
            alert("Value Doesn't Matches");
        }
        else if(email_value == email_re_value) {
            alert("Email Matches");
        }
        else {
            alert("Error Occurred");
        }
    });
});