表单提交后如何禁用以前禁用的选择

Posted 2023-05-09

【中文标题】表单提交后如何禁用以前禁用的选择

【英文标题】：How to disable previously disabled selects after form submit

【发布时间】：2021-10-08 07:25:18

【问题描述】：

我有一个包含多个选择的表单。

其中一些被禁用，因为我不希望用户修改这些值。

但由于它是一个表单并且需要验证，我必须确保<select> 表单字段在禁用时提交。

我已经找到了这个问题的部分解决方案，如下：

jQuery(function ($)         
  $('form').bind('submit', function () 
    $(this).find(':input').prop('disabled', false);
  );
);

问题是表单提交后，我想把原来禁用的选择再次禁用。

选择是动态生成的，并不是所有的都被禁用，所以我事先不知道选择的数量（它是可变的）。

是否有可能再次禁用以前禁用的选择？

【参考方案1】：

您可以在所有这些上添加data-disabled 属性。将 true 设置为禁用的，false 设置为启用的。

在验证期间，您可以检查data-disabled，如果是true，您可以启用选择。

反之亦然。

例子：

jQuery(function($) 
  $('form').bind('submit', function() 
    $(this).find(':input').prop('disabled', false);
    // Do stuff
    console.log('I did stuff')
    $('form').find(':input').each(function(i) 
      if ($(this).attr('data-disabled') == 'true') 
        $(this).prop('disabled', true)
      
    )
    return false;
  );
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<form>
  <input data-disabled='true' disabled='true'>
  <input data-disabled='false'>
  <input data-disabled='false'>
  <input data-disabled='true' disabled='true'>
  <input type='submit' value='Submit'>
</form>

【讨论】：

有什么方法可以在表单提交后自动禁用输入而不点击禁用按钮？

@Cheknov 该按钮是一个示例，您可以简单地将代码放在验证之后。我已经编辑了上面的代码供您查看。

感谢编辑，现在更清楚了。不幸的是，它不适用于我的选择。

@Cheknov 您能否分享一些导致问题的代码，以便我查看是否涉及其他复杂性。