Question

此代码检查复选框是否在站点上启用（如果已禁用），然后禁用文本框。

函数disableTextBox()是onclick函数，而$(function()用于刷新页面后检查复选框的行为，对此我没有使用localstorage因为有时会使用不同的浏览器。

如何更好地编写此代码以免重复？

如果选中此复选框，则应启用文本框；如果未选中此复选框，则应禁用任何输入的复选框。单击与该问题无关的“保存”按钮（这是另一种功能）后，它将保存该复选框，并且当用户返回页面时，应检查该复选框是否已选中并调整文本字段。

有什么想法可以更好地编写它吗？

$(function()
{
var checkboxField = document.querySelector('#checkbox');
var textBox = document.querySelector('#textBox');

if (checkboxField.checked == true)
{
    textBox.disabled = false;

}
else if (checkboxField.checked == false)
{
    textBox.disabled = true;
}
});

function disableTextBox()
{

var checkboxField = document.querySelector('#checkbox');
var textBox = document.querySelector('#textBox');

if (checkboxField.checked == false)
{
    textBox.disabled = true;
}
else if (checkboxField.checked == true)
{
    textBox.disabled = false;
}
}

Answer 1

调用您的disableTextBox()函数，而不是if/else，您可以直接使用boolean的评估后的checkboxField.checked结果：

function disableTextBox() {
  var checkboxField = document.querySelector('#checkbox');
  var textBox = document.querySelector('#textBox');
  textBox.disabled = !checkboxField.checked;
}

jQuery(function( $ ) {
  // Do it on DOM ready
  disableTextBox();
  // and on button click
  $('#btnDisableTextBox').on('click', disableTextBox);
  // Other DOM ready functions here
});

Answer 2

首选这种方式;）

在这个故事中，每件事都是布尔值

不要测试布尔值是否为True来为if声明一个真值...

const
  checkboxField = document.querySelector('#checkbox'),
  textBox       = document.querySelector('#textBox');

checkboxField.onchange = function()
{
 textBox.disabled = !checkboxField.checked;
}

<label> modify texy <input type="checkbox" id="checkbox" checked>

<textarea id="textBox"disable> blah blah bla</textarea>

如何提取此功能以不重复代码

2 个答案: