Question

我试过这个代码，但似乎没有用。我的问题是，当两个文本框的值相等时，我将如何启用按钮？所选的文本框是自动的，将根据多个选择中选择的项目的数量而改变。

<script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>    
<script>
             function getCount(){
                 var comboBoxes = document.querySelectorAll("#tags");
                 var selected = [];
                 for(var i=0,len=comboBoxes.length;i<len;i++){
                        var combo = comboBoxes[i];
                        var options = combo.children;
                        for(var j=0,length=options.length;j<length;j++){
                             var option = options[j];
                             if(option.selected){
                               selected.push(option.text);
                             }
                        }
                 }
                         $('#selected').val(selected.length);;

             }  

</script>
<script>
function disableSubmit(){
  var firstValue = $("#quantitytotransfer").val();
  var secondValue = $("#selected").val();
  if ((firstValue == secondValue)) {
    $("#submit").attr("disabled", false);
  }else{
    $("#submit").attr("disabled", true);
  }  
}

$("#selected").on("keyup", disableSubmit);
$("#quantitytotransfer").on("keyup", disableSubmit);

</script>
<input name="imei" placeholder="quantity" id="quantitytotransfer"> 
<input name="numberselected" readonly id="selected"> 

<select id="tags" onchange="getCount()"multiple style="width: 200px;">
    <option value="aaa">aaa</option>
    <option value="bbb">bbb</option>
    <option value="ccc">ccc</option>
</select>
  <button id="submit" id="submit" disabled type="button">Get Values</button>

<script>

</script>

Answer 1

这里的代码非常简单

<input name="imei" placeholder="quantity" id="quantitytotransfer">
<input name="numberselected" readonly id="selected">

<select id="tags" multiple style="width: 200px;">
  <option value="aaa">aaa</option>
  <option value="bbb">bbb</option>
  <option value="ccc">ccc</option>
</select>
<button id="submit" disabled type="button">Get Values</button>

<script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>

$(function() {
  $("#tags").on("change", function(e) {//Whenever tags are changed it will be called 
    $('#selected').val($(this).find('option').filter(":selected").length);//this will set the count or length of selected length
    $("#submit").prop("disabled", !$("#quantitytotransfer").val() || !$("#selected").val() || ($("#quantitytotransfer").val() != $("#selected").val()));//this will disable or enable depending on equal value
  });

  var delay = (function() {// a delay function
    var timer = 0;
    return function(callback, ms){
      clearTimeout (timer);
      timer = setTimeout(callback, ms);
    };
  })();

  $('#quantitytotransfer, #selected').keyup(function() {//both text box are binded to event
    delay(function() {
      $("#submit").prop("disabled", !$("#quantitytotransfer").val() || !$("#selected").val() || ($("#quantitytotransfer").val() != $("#selected").val()));//this will disable or enable depending on equal value
    }, 1000 );//a 1 second delay used you can change to more less
  });  
});

Answer 2

您可以通过以下方式比较在input标记中输入的值和从select标记中选择的值：

这是如何运作的：

收听input上的输入。
聆听select标记上的更改。
当用户在input中输入值时，请运行逻辑启用按钮。
当用户在select中选择一个值时，请运行逻辑启用按钮。
逻辑启用按钮，比较输入并从input和select标签中选择的值。如果两个值匹配，则启用按钮，否则禁用。
当select代码的值发生变化时，以只读input代码/

 (function() {
   var elmQuantity = $('#quantitytotransfer'),
     elmTags = $('#tags'),
     elmSubmit = $('#submit'),
     elmSelected = $('#selected'),
     findTagsSelected = function() {
       return elmTags.find(':selected').text();
     },
     enableBtn = function() {
       if (elmQuantity.val() === findTagsSelected()) {
         elmSubmit.prop('disabled', false)
       } else {
         elmSubmit.prop('disabled', true)
       }
     };
   elmQuantity.on('input', function() {
       enableBtn();
     }),
     elmTags.change(function(value) {
       enableBtn();
       elmSelected.val(findTagsSelected());
     });
 })();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input name="imei" placeholder="quantity" id="quantitytotransfer">
<input name="numberselected" readonly id="selected">
<select id="tags" multiple style="width: 200px;">
  <option value="aaa">aaa</option>
  <option value="bbb">bbb</option>
  <option value="ccc">ccc</option>
</select>
<button id="submit" id="submit" disabled type="button">Get Values</button>

当两个文本框相同时，我将如何启用按钮

2 个答案: