通过 Javascript 设置 HTML 元素的属性和样式答案

【问题标题】：Set both attribute and style for HTML elements by Javascript通过 Javascript 设置 HTML 元素的属性和样式
【发布时间】：2018-07-29 19:01:52
【问题描述】：

我有这个运行良好的 javascript，因为我正在使用 php 并循环遍历大量数据，这些数据最好在单击单选按钮时与变量一起显示。请看下面的代码：

<script type="text/javascript">

function transferamount() {
 <?php foreach ($wallets as $key => $wallet) : ?>
 if (document.getElementById('<?php echo $key?>').checked) {
 document.getElementById('if<?php echo $key?>').style.display = 'block';
}
else document.getElementById('if<?php echo $key?>').style.display = 'none';
 document.getElementById('if<?php echo $key?>').element.disabled = true;
<?php endforeach; ?>
}
</script>

我遇到的问题是能够同时设置属性和样式，因为我不希望 method = "post" 发送循环的所有数据，而只发送那些显示的数据。我知道即使将样式设置为document.getElementById('elementId').style = "display:none;" ，某些浏览器也可以完美运行，但我想通过将不需要的输入元素的属性设置为禁用以确保它们的值不会发布，从而更加确定这种情况。它们都具有相同的属性名称，这就是我所需要的。因此name = "name"。输入有一些限制，这就是为什么我不能只显示一个输入元素，尽管它们都具有相同的 name 属性。我怎样才能最好地调整我的 JavaScript 来实现这一点？先感谢您。

【问题讨论】：

我不确定您的目标是什么，如果您只是想在页面加载时隐藏/禁用某些表单输入元素，为什么不完全删除它们或不通过 PHP 在首先，还是需要稍后使用 JavaScript 再次启用它们？
@xander 是的，当单击相应的单选按钮时，我需要通过 JS 重新启用它们。每个单选按钮用于下拉一个输入元素及其对应的 ID。我想要这样，直到他们被调用，他们保持在 display:none 和 disabled 。你的评论虽然给出了一个想法。让我试试，然后回复你。非常感谢。
在这种情况下，更好的解决方案是为表单状态使用不同的 CSS 类，然后通过 JS 切换它们，当您可以访问 jQuery 或一些 JS 库时，可以很容易地切换所有匹配元素的 CSS 类，您的代码中不需要任何循环。
@xander 您能否发送一个示例代码来说明您的意思？我将不胜感激。
向您的问题添加一些带有禁用输入的示例 HTML 表单，我知道我能做什么。但也许明天之前我有时间。

标签： javascript php html css codeigniter

【解决方案1】：

我宁愿删除主 HTML 代码中的循环并将其设置为 element.innerHTML。我还用id="ElementId"创建了一个div

<style>
    function transferamount() {
      <?php foreach ($wallets as $key => $wallet) : ?>
      if (document.getElementById('<?php echo $key?>').checked) {
        document.getElementById('ElementId').innerHTML = "<div class='form-group'><label>Amount of <?php echo $wallet?></label><input name='amount' class='form-control' type='number' min='1.00' max='<?php echo ${$key} ?>' placeholder='<?php echo ${$key}?>'></div>";
      }
</style>

使用此代码，脚本可以完美运行。 method = "post" 也可以完美运行。

【讨论】：