Question

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

我在这里尝试过每一个答案，但没有运气。我只尝试过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'
                });
            }
        });
    });
});

Answer 1

这是一个纯粹的javaScript解决方案，供您回答!!

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 ：）

Answer 2

<强> Working fiddle with form

将change()事件附加到复选框，然后切换disabled属性，查看以下示例。

注意： disabled字段不会被提交，如果您想提交已禁用的字段，请使用readonly。

希望这有帮助。

简单代码段

＆＃13;

$().ready(function() {
  $('#checkbox').on('change', function() {
    if ($('#field').attr('disabled')) {
      $('#field').removeAttr('disabled');
    }else {
      $('#field').attr({'disabled': 'disabled'});
    }
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type='checkbox' name="checkbox1" id="checkbox" />Enable
<br>
<input type='text' name="text1" id="field" disabled/>

＆＃13;

Answer 3

试试这个

JS：

document.getElementById("clicker").addEventListener("change",function(event){
     if(event.target.checked)
        document.getElementById("field").removeAttribute("disabled");
     else
        document.getElementById("field").setAttribute("disabled","disabled");
});

HTML：

 <input type="checkbox" id="clicker" />
 <input type="text" id="field" disabled>

Answer 4

您可以使用jQuery .disabled和.checked属性。

你的意思是这样吗？ https://jsfiddle.net/9rn9L1r9/1/

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

4 个答案:

简单代码段