Question

我使用<input type="reset">来清除表单。

如何阻止重置功能清除<input type="text" readonly>或<input type="text" disabled>字段？

Answer 1

<script>
var resetForm = function(){ $(':text:not("[readonly],[disabled]")').val(''); }
//or this is probably better
//var resetForm = function(){ $('input,select,textarea').not('[readonly],[disabled],:button').val(''); }
</script>
<input value="test1" />
<input readonly value="test2"/>
<input disabled value="test3"/>
<input type="button" onclick="resetForm()" value="reset"/>

jsbin：https://jsbin.com/wuvilahobu/edit?html,output

<强>更新将功能reset重命名为resetForm，因为在<form>内保留，它无效。

Answer 2

你可以做这样的事情

<强> Jquery的

$("#reset").click(function(){
  $("input").each(function(){

    if($(this).is('[readonly]') == false && $(this).is('[disabled]')== false)
    {
      $(this).val(null);
    }
  });
});

<强> HTML

<input type="text" readonly value="test">
<input type="text" value="okok">
<input type="text" value="disabled" disabled>
<button id="reset">
Reset
</button>

DEMO

可以防止表单重置清除只读字段？

2 个答案: