Toggle text input based on the Select Box Value

Question

I am trying to do a small JavaScript/JQuery Function

Here is my Code,

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);
    }

  });
});

And this is What I need to do here,

1. If User Select YES, then text box will be enabled and user must make an input and should be a number
2. If user select NO then input should be disabled and user can submit.

I am trying to do this but the disabling is not working properly. Also Please try to help me to make this a numbered input. I can not use type="number" attribute.

Answer 1

You can get the value of select element in change function and set disabled property as true/false based on value:

$(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 Code

<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>

If user select NO then input should be disabled and user can submit.

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

If User Select YES, then text box will be enabled and user must make an input and should be a number

$("#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;
    }
   });

Here is the demo