勾選復選框后如何自動禁用文本字段

Question

我目前正在開展一個項目，該項目要求我實現以下內容：

我有 2 個輸入字段 - 一個常規文本字段和一個復選框。

我想要做的是 - 如果用戶填寫文本字段，復選框應自動禁用。 如果選中復選框，則應禁用文本字段。

到目前為止我想出的是：

<input type="text" name="num-input1" id="dis_rm"  value="" 
onblur="document.getElementById('dis_per').disabled = (''!=this.value);" >
<input type="checkbox" name="num-input2" id="dis_per" value="" 
onblur="document.getElementById('dis_rm').disabled = (''!=this.value);" >

如果我填寫文本字段，復選框將被成功禁用。 但是，如果我勾選復選框，文本字段仍然可用。

我錯過了什么？

Answer 1

如果我是你我會：

• 將我的 JS 代碼從 HTML 中移到一個單獨的文件中，或者至少移到一個script元素中。
• 使用document.getElementById在 DOM 中查找項目。 請參閱https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById
• 從 DOM 中獲得元素后，為模糊事件添加一個事件偵聽器，例如myElement.addEventListener('blur', myCallbackMethod) 。 有關更多信息，請參閱https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener 。
• 在您的回調方法中，您可以使用event.target.checked來查看您添加了事件偵聽器的元素是否被選中。

這是一個小片段，可以幫助您前進：

 const textInput = document.getElementById('element-ID-here'), checkbox = document.getElementById('element-ID-here'); function onTextInputBlurHandler(event) { // if textinput value is empty then // set disabled for checkbox to false // else // set disabled for chexbox to true } textInput.addEventListenet('blur', onTextInputBlurHandler);

 <input type="text" name="num-input1" id="dis_rm" value=""/> <input type="checkbox" name="num-input2" id="dis_per" value=""/>

有了這些信息，您應該能夠（一點）進一步了解。 當你這樣做時，用你的 JavaScript 代碼更新你的問題，我相信人們會很樂意為你提供進一步的幫助。

Answer 2

人們在評論和答案中提出了更好的代碼設計和質量的好建議，但從純粹的功能角度來看，您應該做兩件核心事情來獲得您所描述的功能：

1) 正如Paul S.所提到的，將checked屬性用於您的復選框邏輯。 現在，您正在檢查復選框值是否不是空字符串，但它始終是空字符串，因為這是您分配給元素的值：

<input type="checkbox" name="num-input2" id="dis_per" value="" <----- *here*

您的代碼中沒有其他任何內容會改變它，因此它始終無法通過邏輯檢查。

但是， checked屬性會在您選中和取消選中輸入時自動在true和false之間切換。 要執行您正在尋找的邏輯檢查，請為您的 JavaScript 執行此操作！

document.getElementById('dis_rm').disabled = this.checked;

2）將您綁定（至少）復選框的事件切換到“更改”事件而不是“模糊”。 對於復選框，當您單擊復選框（或點擊空格鍵）時將觸發“更改”事件，但元素仍保持其焦點。 模糊事件只會在用戶將焦點移動到頁面的另一個元素時觸發。

我還建議對文本字段使用“更改”（如果您離開該字段時的值與輸入時的值相同，則運行檢查沒有意義），但這並不重要，因為從從時間的角度來看，當“更改”事件觸發時，它會在“模糊”事件之后立即發生，因此，從用戶的角度來看，行為將是相同的。

---

總而言之，如果您沒有對代碼進行其他更改以提高代碼設計/質量（ Thijs提出了一些很好的建議，順便說一句），這是獲得所需功能所需的最小更改：

<input type="text" name="num-input1" id="dis_rm" value=""
       onblur="document.getElementById('dis_per').disabled = (''!=this.value);" >
<input type="checkbox" name="num-input2" id="dis_per" value=""
       onchange="document.getElementById('dis_rm').disabled = (this.checked);" >