Question

我有这个功能，所有我想要做的就是如果选择第一个单选按钮，然后隐藏一些输入字段并使表单不需要它们。然后选择另一个单选按钮，然后显示那些隐藏的字段，并使表单需要它们。用户可以在单选按钮之间切换，因此显示隐藏操作以及添加和删除所需属性必须在单选按钮更改时发生。现在字段显示和隐藏但我无法更改所需的属性。有任何想法吗？谢谢。

$(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');
       }
   });
});

Answer 1

使用prop（）方法：

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

Answer 2

您可以使用.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);
    }
  });
});

使用javascript和html5设置和删除'required'属性

2 个答案: