jQuery：仅填写一个输入字段并选择菜单答案

【问题标题】：jQuery: fill only one of input field and select menujQuery：仅填写一个输入字段并选择菜单
【发布时间】：2016-03-02 07:43:25
【问题描述】：

如果填写了某个输入字段，我想禁用我的选择菜单。另一方面，如果在选择菜单中选择了除“无”之外的任何选项，那么我希望禁用该输入字段。所以最终我只想提交一个输入字段的值。

到目前为止我做了什么：

Fiddle Demo

jQuery 代码：

$(document).ready(function() {
    $('#Existing_Client').change(function() {
        if ($("#Existing_Client").val() != "none") {
            $('#New_Client').prop('disabled', this.value.length === 0 ? false : true);
        }
    });

    $('#New_Client').change(function() {
        $('#Existing_Client').prop('disabled', this.value.length === 0 ? false : true);
    });
});

工作中的问题：

当我选择“无”以外的其他内容时，输入字段会按照我的意愿被禁用，但是当我再次选择“无”时，输入字段仍然被禁用！
如果我在输入字段中输入任何内容，则不会禁用选择菜单。

【问题讨论】：

请同时显示您的相关 HTML（请参阅“minimal reproducible example”指南），这样可以更轻松地提供更好的答案和有用的演示，其中建议的答案和解决方案。
为什么你选择 NiZa 的答案而不是我的？无意冒犯，我只想知道原因。
@Azim 所有答案都是正确的，最终我只能选择一个，而 NiZa 的答案对我的代码的编辑最少 :) 抱歉，我非常感谢大家的帮助 ^^
好的。但最好接受最佳答案。 @AsmaaAlharbi

标签： javascript jquery validation input

【解决方案1】：

$(document).ready(function() {
  $('#Existing_Client').change(function() {   
      $('#New_Client').prop('disabled', $(this).val() === "none" ? false : true); 
  });

  $('#New_Client').on("keyup", function() {
    $('#Existing_Client').prop('disabled', this.value.length === 0 ? false : true);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="id" id="Existing_Client">
  <option value="none"></option>
  <option value="Something 1">Something 1</option>
  <option value="Something 2">Something 2</option>
  <option value="Something 3">Something 3</option>
</select>
<br>
<input type="text" name="new_id" dir="ltr" id="New_Client" />

【讨论】：

【解决方案2】：

$(document).ready(function() {
    $('#Existing_Client').change(function() {
        if ($("#Existing_Client").val() != "none") {
            $('#New_Client').prop('disabled', true);
        } else {
            $('#New_Client').prop('disabled', false);
        }
    });
});

【讨论】：

【解决方案3】：

$(document).ready(function() {
  $('#Existing_Client').change(function() {
      $('#New_Client').prop('disabled', $('option:selected', this).text().length);
  });

  $('#New_Client').change(function() {
  console.log($(this).val().length)
    $('#Existing_Client').prop('disabled', $(this).val().length);
  });
});

试试这个DEMO

【讨论】：

【解决方案4】：

你可以像下面那样做。

$('#Existing_Client').change(function() {
  $('#New_Client').prop('disabled', this.value != "none");
});

$('#New_Client').keyup(function() {
  $('#Existing_Client').prop('disabled', this.value.length != 0);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="id" id="Existing_Client">
  <option value="none"></option>
  <option value="Something 1">Something 1</option>
  <option value="Something 2">Something 2</option>
  <option value="Something 3">Something 3</option>
</select>
<br>
<input type="text" name="new_id" dir="ltr" id="New_Client" />

UPDATED FIDDLE

【讨论】：