javascript - 如何禁用隐藏元素？

Question

我目前正在开发一个带有显示和隐藏功能的简单 JavaScript 函数。同时，我想验证文件类型的隐藏元素的空值。不幸的是，在 html 中我使用 required 来验证隐藏元素的 null 函数。因此，我正在寻找如何禁用隐藏元素。

这是 javascript 函数代码:

<script>    
    function database_csv(){    
        document.getElementById('send_type').style.display = "none";
        $("#send_type :input").prop("disabled", true);
    }
    function csv_database(){
        document.getElementById('send_type').style.display = "block";
        $("#send_type :input").prop("disabled", false);
    }
</script>

这是 html 代码:

<form action="confirm_sendemail.php" method="post" enctype="multipart/form-data" name="form1" id="form1" > 
  Subject : <br/>
  <input type="text" name="subject" id="subject" required/> <br/>
  Choose your upload type: <br /> 
  <input type="radio" name="email" id="database" onclick="database_csv()" checked value="databse"/>Database
  <input type="radio" name="email" id="csv" onclick="csv_database()" value="csv"/>CSV<br/>
  <div id="send_type" style="display:none">
    <input name="csv" type="file" id="csv" accept=".csv" required/> <br/>
  </div>
  Content : <br/>
  <textarea name="message" cols="50" rows="10" required></textarea><br/>
  <input type="submit" name="submit" value="Submit"/> 
</form> 

Answer 1

我认为 required 属性是您的问题。您可以从 jQuery 中删除 required 属性。

试试这个代码，

<script>
    $('#database').click(function () {
        $('#send_type').hide().children().removeAttr('required');
    });
    $('#csv').click(function () {
        $('#send_type').show().children().attr('required', true);
    });
</script>

SEE THIS WORKING DEMO

注意:您正在使用 csv 作为 HTML 标记中两个元素的 ID。这是不好的。 在客户端，如果您使用 id 访问上传的 csv 文件，脚本将仅考虑第一个 csv id。我的意思是您已经在单选按钮中使用了 csv id。因此，它将仅采用该值。

更新:您为每个单选按钮使用两个单独的功能。为了避免这种情况，您可以使用此代码。

$('input[type=radio]').click(function () {
    if (this.id == 'database') $('#send_type').hide().children().removeAttr('required');
    if (this.id == 'csv') $('#send_type').show().children().attr('required', true);
});

处理来自 HTML 的事件比使用来自 js 的处理程序更好..你可以引用这个 STACKOVERFLOW post 。所以，我从不以这种方式推荐我的代码。