javascript – Checkbox不希望切换启用禁用字段

2023年6月5日 212次阅读

我有一个复选框和一个字段.默认情况下,需要禁用该字段.选中该复选框后,该字段应立即启用.

我在这里尝试过每一个答案,但没有运气.我只尝试过css,但我也失败了.当我在小提琴中尝试一些样本或者在其他任何地方工作时,但在我的项目中他们没有.

我目前所拥有的是一个简单的测试,当我用#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'
                });
            }
        });
    });
});

最佳答案

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,如果你想玩:)

点赞