根据“选择框值”切换文本输入

Question

我正在尝试做一个小的JavaScript / JQuery函数

这是我的代码，

HTML

<select id="mySelect">
   <option value="YES">YES</option>
   <option value="NO">NO</option>
</select>
<input type="text" id="text-input" />
<input type="submit" id="submit" />

JavaScript的

var e = document.getElementById("mySelect");
var strValue = e.options[e.selectedIndex].value;

$(document).ready(function() {
  $("#text-input").prop('disabled', true);
  $('select').click(function() {
    if (strValue == "YES") {
      $("#text-input").prop("disabled", false);
      $("#submit").prop("disabled", false);
    } else if (strValue == "NO") {
      $("#text-input").prop("disabled", true);
      $("#submit").prop("disabled", true);
    }

  });
});

这就是我需要做的，

1. 如果用户选择是，则将启用文本框，用户必须输入并且应该是数字
2. 如果用户选择NO，则应禁用输入，用户可以提交。

我试图这样做，但禁用不能正常工作。 另请尝试帮助我将其作为编号输入。 我不能使用type="number"属性。

Answer 1

您可以在更改函数中获取select元素的值，并根据值将disabled属性设置为true / false：

 $(function(){ $('#mySelect').change(function(){ $("#text-input").prop('disabled', this.value == "NO"); $("#submit").prop('disabled', this.value == "YES"); }).change();//trigger events once for behavior in beginning }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <select id="mySelect"> <option value="YES">YES</option> <option value="NO">NO</option> </select> <input type="text" id="text-input" /> <input type="submit" id="submit" /> 

Answer 2

HTML代码

<form action="#">
<select id="mySelect">
   <option value="YES">YES</option>
   <option value="NO">NO</option>
</select>
<input type="text" id="text-input" />
<span id="errmsg"></span>
<input type="submit" id="submit" />
</form>

如果用户选择NO，则应禁用输入，用户可以提交。

$('#mySelect').change(function(){
   $("#text-input").prop('disabled', this.value == "NO");
   $("#submit").prop('disabled', this.value == "YES");
  }).change()

如果用户选择是，则将启用文本框，用户必须输入并且应该是数字

$("#text-input").keypress(function (e) {
     //if the letter is not digit then display error and don't type anything
     if (e.which != 8 && e.which != 0 && (e.which < 48 || e.which > 57)) {
        //display error message
        $("#errmsg").html("Digits Only").show().fadeOut("slow");
               return false;
    }
   });

这是演示

Answer 3

试试这个：

$(document).ready(function(){
    var select = $('select');
    var textInput = $('#text-input');
    var btnSubmit = $("#submit");

    textInput .prop('disabled', true);
    select.click(function(){
        if(select.val() == "YES"){

         textInput .prop("disabled", false);
         btnSubmit.prop("disabled", false);

      }else if(select.val() == "NO"){

        textInput.prop("disabled", true);
        btnSubmit.prop("disabled", true);

      }

    });
 });

Answer 4

 $(document).ready(function() { $("#text-input").prop('disabled', true); $('#mySelect').change(function() {//use change event if ($('option:selected', this).val() == "YES") {//get value of selected option $("#text-input").prop("disabled", false); $("#submit").prop("disabled", false); } else { $("#text-input").prop("disabled", true); $("#submit").prop("disabled", true); } }).change();//change on load }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <select id="mySelect"> <option value="YES">YES</option> <option value="NO">NO</option> </select> <input type="text" id="text-input" /> <input type="submit" id="submit" /> 

Answer 5

您的代码无法正常工作的原因是因为您在页面加载时获得了select值，而在更改时没有。

尝试在event添加它并将其从click change为change ： -

 $(document).ready(function() { $("#text-input").prop('disabled', true); $('select').change(function() { var e = document.getElementById("mySelect"); var strValue = e.options[e.selectedIndex].value; // or use: var strValue = this.value; if (strValue == "YES") { $("#text-input").prop("disabled", false); $("#submit").prop("disabled", false); } else if (strValue == "NO") { $("#text-input").prop("disabled", true); $("#submit").prop("disabled", true); } }); }); 

像@MilindAnantwar的回答有更好/更清洁的方法，但这就是你的代码无法正常工作的原因。