如何禁用大型表单中的特定表单元素答案

【问题标题】：How do I disable specific form elements in a large form如何禁用大型表单中的特定表单元素
【发布时间】：2023-03-09 06:49:02
【问题描述】：

我必须真诚地感谢 Darren Davies 对我制作测试 html 文件的以下代码的帮助。

<html>
<head>
<title>field_enable</title>
<script type="text/javascript" src="script/jquery.js"></script>
<script>
$().ready(function() {

$('#clicker').click(function() {
$('input').each(function() {
    if ($(this).attr('disabled')) {
        $(this).removeAttr('disabled');
    }
    else {
        $(this).attr({
            'disabled': 'disabled'
          });
      }
    });
 });
});
</script>
</head>
<body>
<div id='clicker' style='background-color:#FF0000; height:20px;     width:50px;'></div>
<br>
<input type='text' disabled></input>
<input type='text' disabled></input>
<input type='text' disabled></input>
</body>
</html>

这非常有效，但是我的表单有大量的 if 字段，在这些字段中我只需要为各种客户端禁用某个字段。当我应用代码时，它肯定会激活我禁用的字段，但是它也会禁用表单中的其余字段，即使它们没有设置属性。我现在的问题是解决如何仅激活我已禁用的字段并保留其余字段。

【问题讨论】：

你只需要取出else块
您确实需要通过对元素使用类来进行更好的控制。一个元素可以有多个类。然后，您可以根据客户端定位特定的类。如果您不将一些结构构建到适用于各种条件的表单中，那么使用通用 dom 搜索选择器进行狩猎和啄食将很难看
因为您使用的是 jQuery。对于此类情况，请使用 .prop()。它专门用于没有值的属性，例如选择和禁用。要获取它是否已禁用您将编写 $("selector").prop("disabled") 并禁用它 $("selector").prop("disabled", true)

标签： javascript jquery html forms

【解决方案1】：

如果您只想影响某些字段，您可以为这些字段分配一个特定的类（在此示例中可更改）

<input type='text' disabled class="changeable" />

并改变这一行

$('input').each(function() {

到

$('input.changeable').each(function() {

所以它只适用于给定类的输入

【讨论】：

嗨戴夫，这很好用，但是我在我的表单元素中调用另一个类：class="corners" 从我的样式表中添加角到文本字段。如果我将禁用 class="changeble" 添加到表单元素中，我会遇到冲突，并且我不确定如何组合这两个类。如果我删除角落它工作正常，但它会减少整体形式的外观。谢谢 - 伊万
如果一个元素有多个类，应该不会有问题。正如您所说的形式，我不太了解您的课堂作业在哪里，但我认为您的意思是输入。无论哪种方式，它都应该工作。看看这个-jsfiddle.net/dp3ub0ew/5 看看它是否有效。您会看到它仅使用“可更改”类切换输入。（也许你可以想一个更好的名字：）
谢谢戴夫，我已经解决了。您可以将两个类组合在一个字段元素中。 class="class1 class2"。我还有一些工作要做，但我现在走在正确的轨道上，谢谢。

【解决方案2】：

它正在禁用其他字段，因为您的“如果”告诉它这样做。使用时：

if ($(this).attr('disabled'))

当输入没有这个属性时，它会失败，所以它会禁用输入！ :)

你可以做的检查是：

if ($(this).is("[disabled]") && $(this).attr('disabled')){
  // do your stuff here
}

所以使用 elem.is("attr-name") 你可以知道它是否有你的属性。

Ivan 指出了另一个解决方案，您可以使用类来区分您的输入。

干杯

【讨论】：