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

【问题标题】：Checkbox doesn't want to toggle enable disable field复选框不想切换启用禁用字段
【发布时间】：2019-04-23 19:39:27
【问题描述】：

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

我在这里尝试了几乎所有的答案，但没有运气。我只尝试过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'
                });
            }
        });
    });
});

【问题讨论】：

请发布您的 html 代码。
我认为form_secondApprover 是表单的ID，对吗？如果是，那么您应该禁用它的 :input 元素，而不是表单本身。
不，表单的名字是form，它里面的所有字段元素都有'form_'前缀。表单和表单元素由 Symfony 框架生成。我还使用了 Sonata Admin Bundle，这让一切变得更加复杂。

标签： javascript html css checkbox

【解决方案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 如果你想玩的话:)

【讨论】：

感谢纯 JavaScript 的回答。不幸的是，这在我的项目中也不起作用。我想我知道问题是什么。 Sonata Admin Bundle 生成表单的方式以及它如何使事情看起来“花哨”是荒谬的。看起来实际的复选框在它们之上获得了 div，以制作一个“假的更好看”的复选框，这一切都搞砸了，选择字段等也是如此......
哦。它看起来很复杂。您的网站上线了吗？
不，抱歉。这是一个公司的私人网站。类似于 CMS 的东西。我想我可以展示一些页面源代码。
@Mentos93 好的。把它贴在小提琴中，我会试一试:)

【解决方案2】：

Working fiddle with form

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

注意：带有disabled的字段将不会提交，如果您想提交残疾人也使用readonly代替。

希望这会有所帮助。

简单的 sn-p 版本

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

<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/>

【讨论】：

感谢您的回答。它有效，但前提是我添加<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>。通过添加我整个项目中的所有其他 JavaScript 不再起作用。我将 Symfony 与一个额外的捆绑包一起使用；奏鸣曲。并且通过添加一个源代码行，其他所有内容都会中断（所有 javascript）。
不客气，我认为 jquery 已经在其他地方加载，尝试删除该行..

【解决方案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>

【讨论】：

它对我来说很好用。请发布您的 HTML 以便更好地理解。

【解决方案4】：

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

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

【讨论】：

所有答案都有效，但在我的项目中没有。我将 Symfony 框架与 Sonata Admin Bundle 一起使用，而该包使一切变得复杂。浏览器不会是问题。