Question

我目前正在开发一个带有show和hide功能的简单javascript函数。同时，我想验证作为文件类型的hide元素的null值。不幸的是，在html中我使用了验证隐藏元素的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属性是你的问题。您可以从required。

中删除jQuery属性

试试这段代码，

<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。这是不好的。在客户端，如果您使用csv访问id文件上传，脚本将仅考虑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。所以，我从不以这种方式推荐我的代码。

Answer 2

HTML5验证（例如required）不会在已停用的输入元素上运行，因此这不是导致问题的原因。

如果您提供的代码是准确的，看起来您的jQuery选择器定位表单输入无效：

// You have an extra colon before "input"!
$("#send_type :input").prop("disabled", true);

// This should work
$("#send_type input").prop("disabled", true);

总的来说，您可以使用jQuery的原生show / hide来清理代码，并按照jFriend的评论中的建议链接您的方法：

$('#send_type').hide().find('input').prop('disabled', true);

您需要的完整代码如下：

function database_csv(){    
  $('#send_type').hide().find('input').prop('disabled', true);
}
function csv_database(){
  $('#send_type').show().find('input').prop('disabled', false);
}

此外，如果您希望预先选择database，则默认情况下应将文件输入字段设置为disabled，以防止触发所需的验证：

<input name="csv" type="file" id="csv" accept=".csv" required disabled />

这是一个完整的例子：

http://jsbin.com/yinil/2/edit

如何禁用隐藏元素？

2 个答案: