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');