javascript - 当使用 jquery 从下拉列表中选择一个值时，将输入文本设置为只读

Question

我有一个选择框，其中的选项是，

• 无
• 当前
• future

如果您选择“无”，则所有文本框都应该是可编辑的。如果您选择“当前”，则 class="current" 这些文本框应该是可编辑的，其余的应该是只读的。 future 也同样如此。当我选择 future 时， future 的文本框应该是可编辑的，其余的应该是只读的

$('#cognizant').change(function(){
    if(this.value == ""){
        $('.current').prop('readonly',true);
     } else{
      $('.current').prop('readonly',false);
   }
 }).change();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="curator">
  <tbody id="tableToModify">
    <tr>
        <td>
          <select id="cognizant" class="discount-type" >
            <option value="">none</option>
            <option value="1">current</option>
            <option value="2">future</option>
            
          </select>
        </td>
        <td>
<input type="text"   id="clientbi" class="current"/>
<input type="text"   id="cognizantbi" class="current"/>
<input type="text"  id="futurevsm" class="future" />
 <input type="text"  id="futuresymbols" class="future" />
        </td>
      </tr>
    </tbody>
  </table>

Answer 1

我们只更改您的 JavaScript 代码。

我们需要使用 jQuery 的 change() 函数 ( documentation )，然后验证所选选项。

最终代码:

$('#cognizant').change(function(){

  var value = $(this).val();

  if(value == ''){
    // NONE
    $('#curator input[type="text"]').removeAttr('readonly');
  }
  else if(value == '1'){
    // CURRENT
    $('#curator input[type="text"]').attr('readonly', true);
    $('#curator .current').removeAttr('readonly');
  }
  else if(value == '2'){
    // FUTURE
    $('#curator input[type="text"]').attr('readonly', true);
    $('#curator .future').removeAttr('readonly');
  }

});

查看实际效果:https://jsfiddle.net/x5fdLqff/4/