用戶可以選擇兩個輸入，但只需要一個輸入。

Question

要創建塗料制造商網站，產品頁面必須為用戶提供輸入RAL顏色代碼或使用顏色選擇器選擇顏色的選項。

要做到這一點，我用過：

<p class="line-item-property__field">
  <label for="ral-colour-code">RAL Colour Code</label>
  <input required class="required" id="ral-colour-code" type="text" name="properties[RAL Colour Code]">
</p>

<p class="line-item-property__field">
  <label for="choose-a-colour">OR Choose a colour</label>
  <input  id="choose-a-colour" type="color" name="properties[Choose a colour]">
</p>

這實現了主要目標，因為用戶對顏色的選擇包含在公司收到的確認訂單中。 但是，我擔心的是，在某些情況下，用戶可以使用選擇器選擇顏色，然后輸入准確的顏色代碼 - 兩者都將包含在確認中。 我想最好的做法是在將文本輸入到另一個輸入時禁用一個輸入，但是需要向用戶清楚這兩個選項中的哪一個將應用於他們的訂單。

什么”我嘗試：做了一些挖后，我發現回答了類似的問題在這里 。 所以我嘗試了：

jQuery(function ($) {
 var $inputs = $('properties[RAL Colour Code],properties[Choose a colour]');
  $inputs.on('input', function () {
// Set the required property of the other input to false if this input is not empty.
  $inputs.not(this).prop('required', !$(this).val().length);
 });
});

這返回了以下錯誤：

Error: Syntax error, unrecognized expression: properties[RAL Colour Code],properties[Choose a colour]

除了錯誤，我認為這可能不是我正在尋找的解決方案，因為它只是刪除了required標簽，但可能用戶stil可以選擇填寫兩者。

Answer 1

嘗試這個：

<input type="text" id="choose" />
<input type="text" id="write" />

和jQuery：

$("#choose, #write").keyup(function(){
  if($("#choose").val() != "") {
    $("#write").hide();
  }else if($("#write").val() != "") {
    $("#choose").hide();
  }else{
    $("#write").show();
    $("#choose").show();
  }
});

這是你的小提琴

滿足您需求的新小提琴 。 添加了清除顏色按鈕，使用了您的ID， input type="color"事件已更改為.change()