僅當所有字段都已填寫時，如何接受值或啟用按鈕？

Question

我試圖找到一種方法，通過單擊按鈕或按“Enter”來接受來自我的 HTML（razorview）的值。 我想做的是

1. 僅當兩個字段都已填寫時才啟用發送按鈕，否則應禁用它。
2. 按“Enter”鍵發送值。 但是，這也應該僅在兩個字段都已填寫時發生。

我最初的（失敗的）嘗試看起來有點像：

 < script src = "~/Scripts/jquery.signalR-2.2.2.min.js" > < /script> < script src = "~/signalr/js" > < /script> < script src = "~/Scripts/SignalR.js" > < /script> < script type = "text/javascript" src = "//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js" > < /script> < script type = "text/javascript" > < /script> (function() { var myHub = $.connection.myHub; $("#textarea").keyup(function() { if ($(this).val() != "" && $("textarea").val() != "") { console.log("This should not run unless all feilds are full."); var text = ($(this).val()).toString(); text = text.replace(/\\s+/g, " ").trim(); var message = ($("textarea").val()).toString(); message = message.replace(/\\s+/g, " ").trim(); $('input[type="button"]').removeAttr('disabled'); } else { $("#send").attr('disabled', 'disabled'); } }); $('#yourMessage, fname').keyup(function(e) { if ($("#yourMessage").val() != "" && $("#fname").val() != "") { if (e.which == 13) { //Enter key pressed $('#send').trigger('click'); //Trigger search button click event } } }); })();

 .button { text-decoration: none; border: none; padding: 12px 20px; cursor: pointer; outline: 0; display: inline-block; margin-right: 2px; border-radius: 12px; background-color: blue; opacity: 1; } .button-blue { background-color: #3498db; } .button-blue:hover { background-color: #3498db; } .button-blue:active { color: #3498db; background-color: #3498db; box-shadow: 0px 0px 6px 2px rgba(0, 0, 0, 0.2); } .button:disabled { opacity: 0.6; pointer-events: none; }

 <h1>Hello!</h1> <form action="" method="post" id="subscribe" name="subscribe"> First name: <input type="text" name="fname" id="fname" placeholder="Name" required autofocus><br> <div id="message"></div> Your Message:<br> <textarea typeof="text" id="yourMessage" placeholder="Start Typing..." required></textarea><br /> <input type="button" class="button button-blue" value="Send" name="button" disabled="disabled" id="send" /> </form> <input type="button" class="button button-blue" value="Click Me!" id="click-me" />

Answer 1

答案是您必須綁定到所有不同的情況。 這是您正在尋找的工作jsfiddle： https ://jsfiddle.net/4z5zgqbn/

$(document).ready(function() {
  $("#send").prop("disabled", true);

  $("#yourMessage").on("keyup", function() {
    if ($(this).val() != "" && $("#fname").val() != "") {
      $("#send").prop("disabled", false);
    } else {
      $("#send").prop("disabled", true);
    }
  });
  $("#fname").on("keyup", function() {
    if ($(this).val() != "" && $("#yourMessage").val() != "") {
      $("#send").prop("disabled", false);
    } else {
      $("#send").prop("disabled", true);
    }
  });

  $("#yourMessage, #fname").on("keyup", function(e) {
    if (e.which == 13 && $("#fname").val() != "" && $("#yourMessage").val() != "") {
      $("#send").click();
    }
  })

  $("#send").on("click", function() {
    alert("send message");
  })
})

Answer 2

To 1：這就是我所做的：給你所有的輸入一個相同的類名（.classname），

$(".classname").bind("change paste keyup", function() {
    if ($("#fname").val() && $("#yourMessage").val()) { 
        $( "#Send" ).prop( "disabled", false ); 
    } else {
        $( "#Send" ).prop( "disabled", true );
    }
});

到 2：

$('.classname').on('keypress', function (e) {
     if(e.which === 13 && $("#fname").val() && $("#yourMessage").val()){

        //Disable textbox to prevent multiple submit
        $( "#Send" ).prop( "disabled", true );
        //Submit your form
     }

});

還沒有測試它。