javascript - 复选框不想切换启用禁用字段

Question

我有一个复选框和一个字段。默认情况下，该字段需要禁用。一旦选中该复选框，该字段就应该启用。

我几乎尝试了这里的每个答案，但没有成功。我只尝试过 css，但我也失败了。当我在 fiddle 或其他任何地方尝试一些示例时，它们可以工作，但在我的元素中却没有。

我目前拥有的是一个简单的测试，当我使用 #clicker 单击任何内容时，该字段会禁用/启用。这非常有效。所以我知道我的 JavaScript 可以工作，所以我不需要任何额外的库。现在我只需要调整我的代码以在复选框是否被选中时工作。

这是我的；

<script type="text/javascript">
$().ready(function() {
    $('#clicker').click(function() {
        $('#form_secondApprover').each(function() {
            if ($(this).attr('disabled')) {
                $(this).removeAttr('disabled');
            }
            else {
                $(this).attr({
                    'disabled': 'disabled'
                });
            }
        });
    });
});

Answer 1

Here is a pure javaScript solution for your answer !!

document.addEventListener("DOMContentLoaded", function(event) {
    var checkbox = document.getElementById('clicker');
    var inputs = document.querySelectorAll('input[type=text]');
    checkbox.addEventListener('change', function(event) {
        for (var i = 0; i < inputs.length; i++) {
            inputs[i].disabled = !checkbox.checked;
        }
    });
});

input[type="text"]:disabled {
  cursor: not-allowed;
}

<input type="checkbox" id="clicker" />
<label for="clicker">Click Me, I'll disable/enable these text boxes</label>

<form id="form_secondApprover">
  <input type="text" disabled/>
  <input type="text" disabled/>
  <input type="text" disabled/>
</form>

这是 FIDDLE 如果你想玩 :)