javascript - 如何使用所选选项禁用我的输入和内部内容

Question

我环顾四周，没有找到解决我的问题的方法，我正在尝试学习 javascript 和 jquery。我想了解的是，当我选择option时我该怎么做？ “无”<input>以及其中的数据应该被禁用。

这是我的尝试:

第一次尝试链接:http://jsfiddle.net/kmtLy705/7/

第一次尝试代码:(适用于按钮)

<input disabled id="page_navigation1" type="number">

<button class="add">Add</button>
<button class="remove">Remove</button>

<select>
  <option value="0" class="add" selected>None</option>
  <option value="1" class="remove">select</option>
  <option value="2" class="remove">select</option>
  <option value="3" class="remove">select</option>
  <option value="4" class="remove">select</option>
  <option value="5" class="remove">select</option>
</select>

jquery

$('.add').click(function() {
  $('#page_navigation1').attr('disabled', true)
});

$('.remove').click(function() {
  $('#page_navigation1').removeAttr('disabled');

});

现在，这段代码可以与按钮一起使用，但我已经尝试了无数种方法来使其与选项一起使用，但尚未找到解决方案。

第二次尝试链接:http://jsfiddle.net/5u9pfot0/1/这根本不起作用，但想法就在那里(当选择 val1 时，应该禁用输入)

第二次尝试代码:

<select id="selectid" name="selectname">
  <option value="val1" id="valid1"> Val1 </option>
  <option value="val2" id="valid2"> Val2 </option>
  <option value="val3" id="valid3"> Val3 </option>
</select>

<input disabled id="page_navigation1" type="number">

jquery:

  if (document.getElementById('selectid').value == "val1") {
  $('#page_navigation1').attr('disabled', true)
} 

Answer 1

我对你的第二种方法做了一点修改。 尝试执行以下操作:

function callthis()
{
if (document.getElementById('selectid').value == "val1") {
  $('#page_navigation1').attr('disabled', true);
} 
else
	$('#page_navigation1').attr('disabled', false);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="selectid" name="selectname" onchange="callthis();">
    <option default disabled>Choose one</option>
    <option value="val1" id="valid1"> Val1 </option>
    <option value="val2" id="valid2"> Val2 </option>
    <option value="val3" id="valid3"> Val3 </option>
</select>

<input disabled id="page_navigation1" type="number">