设置和移除'属性使用javascript和html5

Setting and removing the 'required' attribute using javascript and html5

本文关键字：html5 属性 javascript 设置      更新时间：2023-09-26

我有这个函数，所有我想做的是，如果第一个单选按钮被选中，然后隐藏一些输入字段，使它们不需要的形式。然后选择另一个单选按钮，然后显示这些隐藏字段，并使它们成为表单所必需的。用户可能在单选按钮之间进行更改，因此显示隐藏操作以及添加和删除所需属性必须在单选按钮更改时进行。目前字段显示和隐藏，但我不能改变所需的属性。什么好主意吗?谢谢你。

$(document).ready(function() {
   $('input[type="radio"]').click(function() {
       if($(this).attr('id') == 'watch-me') {
            $('#show-me').show();  
            $('#1041827741').setAttribute("required", "");
            $('#1283215174').setAttribute("required", "");
            $('#1496644528').setAttribute("required", "");
            $('#1392644643').setAttribute("required", "");
            $('#1321281340').setAttribute("required", "");
       }
       else {
            $('#show-me').hide();
            $('#1041827741').removeAttr('required');
            $('#1283215174').removeAttr('required');
            $('#1496644528').removeAttr('required');
            $('#1392644643').removeAttr('required');
            $('#1321281340').removeAttr('required');
       }
   });
});

使用prop()方法:

$('#1041827741').prop('required',true);

您可以使用.prop("required"， true/false)来设置和删除。另外，setAttribute和removeAttribute方法是直接对元素进行操作的原生DOM方法。

如果你没有改变元素标记的选项，你可以修改你的代码来保存一些类型。

这是你可以做的修复

$(document).ready(function() {
  $('input[type="radio"]').click(function() {
    var ids = ["#1041827741", "#1283215174", "#1496644528", "#1392644643", "#1321281340"];
    if ($(this).attr('id') === 'watch-me') {
      $('#show-me').show();
      ids.forEach((id) => $(id).prop("required", true));
    } else {
      $('#show-me').hide();
      ids.forEach((id) => $(id).prop("required", false));
    }
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

如果你有改变元素的选项，我会给所有这些元素分配一个相同的类名，只对id进行操作。

可以这样做。

$(document).ready(function() {
  $('input[type="radio"]').click(function() {
    if ($(this).attr('id') === 'watch-me') {
      $('#show-me').show();
      //inputElement is the class assigned to all input elements
      $(".inputElement").prop("required", true);
    } else {
      $('#show-me').hide();
      $(".inputElement").prop("required", false);
    }
  });
});

相关文章：