Question

我需要禁用一组输入元素，而不必在每个输入元素中设置disabled属性。因为在我的情况下，这些元素都在一个表的行中，我想把属性放在容器tr中，但据我所知，只有输入元素支持它。我希望能够做到这样的事情：

<table>
    <tr disabled="disabled">
        <td><input name="i1" type="checkbox" .../></td>
        <td><input name="i2" type="text" .../></td>
            ...
        <td><input name="iN" type="text" .../></td>
    </tr>
</table>

并禁用从i1到iN的所有输入。如何使用CSS或其他方法获得相同的结果？

Answer 1

如果你可以使用Javascript，那么这样就可以了：

var inputs = document.getElementsByTagName("INPUT");
for (var i = 0; i < inputs.length; i++) {
    inputs[i].disabled = true;
}

或者如果你正在使用jQuery，这种方法可能更简单：

$("input").prop("disabled", true);

如果你不能使用Javascript，那么我唯一能想到的就是使用CSS隐藏<input>标签，但这不会真正禁用它们，只能隐藏它们视图。因此，如果任何输入具有默认值，那么这些值仍将被传递。

input {
  display: none;
}

所有条件相同，我绝对建议使用Javascript或jQuery方法。

Answer 2

最佳选择是使用JQuery

$('.disabled input').attr('disabled','disabled');

这将禁用已禁用行下的所有输入元素。

Answer 3

您无法通过CSS禁用。

你可以通过javascript实现它（就像在Dryden长回答中一样）。禁用相关 tr 的所有输入。

但是这有渲染时没有被禁用的问题。这意味着总会有一个输入未被禁用的时刻。请注意这一点。

我不知道你是如何创建那些输入的。但是，例如，如果它们是通过PHP生成的，则可以在循环中指定它。

即使你不这样做，如果你可以在你的服务器上使用PHP，这可以使事情变得更容易。就像这样简单：

<table>
    <tr disabled="disabled">
        <td><input name="i1" type="checkbox" .../></td>
<?php
  for ($i=2;$i<$n;$i++)
        echo '<td><input name="i'.$i.'" type="text" disabled="disabled" .../></td>';
?>
    </tr>
</table>

如果您有不同的类型，您可以随时执行以下操作：

<table>
    <tr disabled="disabled">
<?php
  $arr = array("checkbox","text","text"...);
  for ($i=0;$i<$n;$i++)
        echo '<td><input name="i'.($i+1).'" type="'.$arr[$i].'" disabled="disabled" .../></td>';
?>
    </tr>
</table>

如果你想避免使用相同的字符串，你可以创建第二个数组来存储不同的可能值。像这样：

<table>
    <tr disabled="disabled">
<?php
  $arr1 = array(0,1,1,1,0,1...);
  $arr2 = array("checkbox","text");
  for ($i=0;$i<$n;$i++)
        echo '<td><input name="i'.($i+1).'" type="'.$arr2[$arr1[$i]].'" disabled="disabled" .../></td>';
?>
    </tr>
</table>

一次禁用一组输入元素

3 个答案: