HTML 양식이있는 두 페이지가 있습니다. 첫 번째 페이지에는 제출 양식이 있고 두 번째 페이지에는 승인 양식이 있습니다. 첫 번째 양식은 많은 컨트롤을 선택할 수있는 반면, 두 번째 페이지는 제출 양식의 데이터를 확인 메시지와 함께 다시 표시합니다. 이 두 번째 양식에서 모든 필드는 정적이어야합니다.

내가 볼 수 있듯이, 일부 양식 컨트롤은 readonly모두 가능하며 disabled, 차이점은 여전히 ​​읽기 전용 필드로 탭 할 수 있다는 것입니다.

이 필드를 필드별로 수행하는 대신 사용자가 컨트롤을 변경할 수 없도록 전체 양식을 읽기 전용 / 비활성화 / 정적으로 표시하는 방법이 있습니까?

입력 필드 및 기타 항목을 a로 랩핑하고 속성을 <fieldset>제공하십시오 disabled="disabled".

예 ( http://jsfiddle.net/7qGHN/ ) :

<form>
    <fieldset disabled="disabled">
        <input type="text" name="something" placeholder="enter some text" />
        <select>
            <option value="0" disabled="disabled" selected="selected">select somethihng</option>
            <option value="1">woot</option>
            <option value="2">is</option>
            <option value="3">this</option>
        </select>
    </fieldset>
</form>

readonly예를 들어, 모든 양식 요소를로 설정할 수있는 것은 아닙니다 .

• 확인란
• 라디오 박스
• 파일 업로드
• ...더..

OP가 특정 "잠금"양식을 서버로 보내야한다고 명시하지 않았기 때문에 합리적인 해결책은 모든 양식 요소의 disabled속성을 로 설정 true하는 것입니다.disabled 속성이 허용하지 않음).

아래 데모에서 제시되는 또 다른 솔루션은 form요소 위에 레이어를 배치 하여 요소 내부의 모든 요소와의 상호 작용을 방지 하는 레이어를 배치하는 것 form입니다.z-index 값으로 .

데모:

var form = document.forms[0], // form element to be "readonly"
    btn1 = document.querySelectorAll('button')[0],
    btn2 = document.querySelectorAll('button')[1]

btn1.addEventListener('click', lockForm)
btn2.addEventListener('click', lockFormByCSS)

function lockForm(){
  btn1.classList.toggle('on');
  [].slice.call( form.elements ).forEach(function(item){
      item.disabled = !item.disabled;
  });
}

function lockFormByCSS(){
  btn2.classList.toggle('on');
  form.classList.toggle('lock');
}

form{ position:relative; } 
form.lock::before{
  content:'';
  position:absolute;
  z-index:999;
  top:0;
  right:0;
  bottom:0;
  left:0;
}

button.on{ color:red; }

<button type='button'>Lock / Unlock Form</button>
<button type='button'>Lock / Unlock Form (with CSS)</button>
<br><br>
<form>
  <fieldset>
    <legend>Some Form</legend>
    <input placeholder='text input'>
    <br><br>
    <input type='file'>
    <br><br>
    <textarea placeholder='textarea'></textarea>
    <br><br>
    <label><input type='checkbox'>Checkbox</label>
    <br><br>
    <label><input type='radio' name='r'>option 1</label>
    <label><input type='radio' name='r' checked>option 2</label>
    <label><input type='radio' name='r'>option 3</label>
    <br><br>
    <select>
      <option>options 1</option>
      <option>options 2</option>
      <option selected>options 3</option>
    </select>
  </fieldset>
</form>

이 기능을 사용하여 양식을 비활성화 할 수 있습니다.

function disableForm(formID){
  $('#' + formID).children(':input').attr('disabled', 'disabled');
}

실무 데모보기

jQuery를 사용합니다.

확인 페이지에서 내용을 편집 가능한 컨트롤에 넣지 말고 페이지에 쓰십시오.

이 작업을 수행하는 기본 제공 방법이 없으므로 양식이 얼마나 복잡한 지에 따라 사용자 지정 솔루션을 만들어야합니다. 이 게시물을 읽어야합니다.

HTML 양식을 읽기 전용으로 변환 ( 업데이트 : 손상된 게시물 링크, 보관 된 링크 )

편집 : 업데이트에 따라 왜 읽기 전용이 걱정됩니까? 클라이언트 측을 통해 할 수 있지만 그렇지 않은 경우 각 컨트롤에 필요한 태그를 추가하거나 데이터를 변환하여 컨트롤이없는 원시 텍스트로 표시해야합니다. 다음 게시물이 수정되지 않도록 읽기 전용으로 만들려고하면 누구나 게시물을 엉망으로 만들 수 있기 때문에 실제로 데이터를받을 때 원하는 게시물을 생성하여 확인하는 것이 좋습니다. 다시 유효한지 확인하십시오.

완벽하게 호환되는 공식 HTML 방법은 없지만 약간의 자바 스크립트는 먼 길을 갈 수 있습니다. 또 다른 문제는 POST 데이터에 비활성화 된 필드가 표시되지 않는다는 것입니다.

지정된 요소에서 모든 입력 , 텍스트 영역 , 선택 및 단추 를 비활성화하는 데 이상적인 솔루션입니다 .

jQuery 1.6 이상 :

// To fully disable elements
$('#myForm :input').prop('disabled', true); 

또는

// To make elements readonly
$('#myForm :input').prop('readonly', true); 

jQuery 1.5 이하 :

$('#myForm :input').prop('disabled', 'disabled');

과

$('#myForm :input').prop('readonly', 'readonly');

모든 브라우저에서 지원되는 또 다른 간단한 방법은 다음과 같습니다.

HTML :

<form class="disabled">
  <input type="text" name="name" />
  <input type="radio" name="gender" value="male">
  <input type="radio" name="gender" value="female">
  <input type="checkbox" name="vegetarian">
</form>

CSS :

.disabled {
  pointer-events: none;
  opacity: .4;
}

그러나 태빙은 여전히이 방법으로 작동하며 포커스가있는 요소는 여전히 사용자가 조작 할 수 있습니다.

모든 양식 ID에 번호를 매기고 JS에서 for 루프를 실행하십시오.

 for(id = 0; id<NUM_ELEMENTS; id++)
   document.getElementById(id).disabled = false; 

오히려 jQuery를 사용하고 싶습니다.

$('#'+formID).find(':input').attr('disabled', 'disabled');

find ()는 children ()보다 n 번째로 중첩 된 자식까지 훨씬 깊어 질 것입니다. 즉, 즉시 자식 만 찾습니다.

가장 쉬운 방법

$('#yourform *').prop('readonly', true);

양식 위에 HTML 보이지 않는 레이어를 추가합니다. 예를 들어

<div class="coverContainer">
<form></form>
</div>

그리고 스타일 :

.coverContainer{
    width: 100%;
    height: 100%;
    z-index: 100;
    background: rgba(0,0,0,0);
    position: absolute;
}

물론 사용자는 웹 브라우저에서이 계층을 숨길 수 있습니다.