单击提交按钮时使所有表单输入处于只读模式

Question

单击提交按钮时我有一个表单，所有输入都需要处于只读模式并隐藏提交按钮并显示提交文本。为此我编码：

$(document).ready(function() {
  $("#submit_text").hide(); //Hiding submit_text
  $("#testsubmitbutton").click(function() {
    $("#testsubmitbutton").hide(); //Hiding submit button
    $("#submit_text").show(); //Showing submit_text

    $("#testform :input").prop('readonly', true); //Making all inputs to readonly

  });
});

.hiddenFramehideclass {
  position: absolute;
  top: -1px;
  left: -1px;
  width: 1px;
  height: 1px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<iframe name="hiddenFrame" class="hiddenFramehideclass"></iframe>

<form method="post" action="" enctype="multipart/form-data" id="testform" target="hiddenFrame">

  Question 1
  <div class="question_container">
    <div class="question_div">
      <p>Question?</p>
      <input type="hidden" name="qid1" value="22">
      <div class="option_div">
        <input type="radio" name="radio1" id="checka1" value="A">
        <label for="checka1">
          <p>A</p>
        </label>
      </div>
      <div class="option_div">
        <input type="radio" name="radio1" id="checkb1" value="B">
        <label for="checkb1">
          <p>B</p>
        </label>
      </div>
      <div class="option_div">
        <input type="radio" name="radio1" id="checkc1" value="C">
        <label for="checkc1">
          <p>C</p>
        </label>
      </div>
      <div class="option_div">
        <input type="radio" name="radio1" id="checkd1" value="D">
        <label for="checkd1">
          <p>D</p>
        </label>
      </div>
      <div class="option_div">
        <input type="radio" name="radio1" id="checke1" value="E">
        <label for="checke1">
          <p>None of the above</p>
        </label>
      </div>
    </div>
  </div>
  <button class="" type="submit" name="testsubmitbutton" id="testsubmitbutton">Submit</button>
  <span id="submit_text">Submitting please <b>do not</b> refresh!</span>
</form>

当我单击提交按钮时，它会隐藏提交按钮并显示提交文本。但它不会将输入属性更改为只读模式。

Answer 1

用于单选按钮 disabled 属性:

$(document).ready(function() {
  $("#submit_text").hide(); //Hiding submit_text
  $("#testsubmitbutton").click(function() {
    $("#testsubmitbutton").hide(); //Hiding submit button
    $("#submit_text").show(); //Showing submit_text

    $("#testform :input").prop('disabled', true); //Making all inputs to disabled

  });
});

.hiddenFramehideclass {
  position: absolute;
  top: -1px;
  left: -1px;
  width: 1px;
  height: 1px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<iframe name="hiddenFrame" class="hiddenFramehideclass"></iframe>

<form method="post" action="" enctype="multipart/form-data" id="testform" target="hiddenFrame">

  Question 1
  <div class="question_container">
    <div class="question_div">
      <p>Question?</p>
      <input type="hidden" name="qid1" value="22">
      <div class="option_div">
        <input type="radio" name="radio1" id="checka1" value="A">
        <label for="checka1">
          <p>A</p>
        </label>
      </div>
      <div class="option_div">
        <input type="radio" name="radio1" id="checkb1" value="B">
        <label for="checkb1">
          <p>B</p>
        </label>
      </div>
      <div class="option_div">
        <input type="radio" name="radio1" id="checkc1" value="C">
        <label for="checkc1">
          <p>C</p>
        </label>
      </div>
      <div class="option_div">
        <input type="radio" name="radio1" id="checkd1" value="D">
        <label for="checkd1">
          <p>D</p>
        </label>
      </div>
      <div class="option_div">
        <input type="radio" name="radio1" id="checke1" value="E">
        <label for="checke1">
          <p>None of the above</p>
        </label>
      </div>
    </div>
  </div>
  <button class="" type="submit" name="testsubmitbutton" id="testsubmitbutton">Submit</button>
  <span id="submit_text">Submitting please <b>do not</b> refresh!</span>
</form>

如果您想将选定的值发送到服务器，那么您可以将 pointer-events 设置为 none，这将指示该元素不是指针事件的目标：

$(document).ready(function() {
  $("#submit_text").hide(); //Hiding submit_text
  $("#testsubmitbutton").click(function() {
    $("#testsubmitbutton").hide(); //Hiding submit button
    $("#submit_text").show(); //Showing submit_text
    $("#testform :input").css({'pointer-events':'none', 'opacity':'.5'});
    $('.option_div p').css({'opacity':'.5'});
    $('.option_div p').click(false);
    console.log($("form").serialize());
  });
});

.hiddenFramehideclass {
  position: absolute;
  top: -1px;
  left: -1px;
  width: 1px;
  height: 1px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<iframe name="hiddenFrame" class="hiddenFramehideclass"></iframe>

<form method="post" action="" enctype="multipart/form-data" id="testform" target="hiddenFrame">

  Question 1
  <div class="question_container">
    <div class="question_div">
      <p>Question?</p>
      <input type="hidden" name="qid1" value="22">
      <div class="option_div">
        <input type="radio" name="radio1" id="checka1" value="A">
        <label for="checka1">
          <p>A</p>
        </label>
      </div>
      <div class="option_div">
        <input type="radio" name="radio1" id="checkb1" value="B">
        <label for="checkb1">
          <p>B</p>
        </label>
      </div>
      <div class="option_div">
        <input type="radio" name="radio1" id="checkc1" value="C">
        <label for="checkc1">
          <p>C</p>
        </label>
      </div>
      <div class="option_div">
        <input type="radio" name="radio1" id="checkd1" value="D">
        <label for="checkd1">
          <p>D</p>
        </label>
      </div>
      <div class="option_div">
        <input type="radio" name="radio1" id="checke1" value="E">
        <label for="checke1">
          <p>None of the above</p>
        </label>
      </div>
    </div>
  </div>
  <button class="" type="submit" name="testsubmitbutton" id="testsubmitbutton">Submit</button>
  <span id="submit_text">Submitting please <b>do not</b> refresh!</span>
</form>

Answer 2

只读不适用于单选按钮，您可以使用 disabled: true，但是...

查看此答案以了解禁用和只读之间的区别：What's the difference between disabled="disabled" and readonly="readonly" for HTML form input fields?

$(document).ready(function() {
  $("#submit_text").hide(); //Hiding submit_text
  $("#testsubmitbutton").click(function() {
    $("#testsubmitbutton").hide(); //Hiding submit button
    $("#submit_text").show(); //Showing submit_text

    $("#testform :input").attr('disabled', true); //Making all inputs to readonly

  });
});

.hiddenFramehideclass {
  position: absolute;
  top: -1px;
  left: -1px;
  width: 1px;
  height: 1px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<iframe name="hiddenFrame" class="hiddenFramehideclass"></iframe>

<form method="post" action="" enctype="multipart/form-data" id="testform" target="hiddenFrame">

  Question 1
  <div class="question_container">
    <div class="question_div">
      <p>Question?</p>
      <input type="hidden" name="qid1" value="22">
      <div class="option_div">
        <input type="radio" name="radio1" id="checka1" value="A">
        <label for="checka1">
          <p>A</p>
        </label>
      </div>
      <div class="option_div">
        <input type="radio" name="radio1" id="checkb1" value="B">
        <label for="checkb1">
          <p>B</p>
        </label>
      </div>
      <div class="option_div">
        <input type="radio" name="radio1" id="checkc1" value="C">
        <label for="checkc1">
          <p>C</p>
        </label>
      </div>
      <div class="option_div">
        <input type="radio" name="radio1" id="checkd1" value="D">
        <label for="checkd1">
          <p>D</p>
        </label>
      </div>
      <div class="option_div">
        <input type="radio" name="radio1" id="checke1" value="E">
        <label for="checke1">
          <p>None of the above</p>
        </label>
      </div>
    </div>
  </div>
  <button class="" type="submit" name="testsubmitbutton" id="testsubmitbutton">Submit</button>
  <span id="submit_text">Submitting please <b>do not</b> refresh!</span>
</form>

单击提交按钮时使所有表单输入处于只读模式

Making all form inputs to be in readonly mode while clicking submit button

javascript

jquery

input

readonly

radio-button