HTML 양식 읽기 전용 SELECT 태그 / 입력
HTML 사양에 따르면 HTML의 select
태그에는 readonly
속성 이없고 속성 만 disabled
있습니다. 따라서 사용자가 드롭 다운을 변경하지 못하게하려면을 사용해야 disabled
합니다.
유일한 문제는 비활성화 된 HTML 양식 입력이 POST / GET 데이터에 포함되지 않는다는 것입니다.
태그 의 readonly
속성 을 에뮬레이트 select
하고 POST 데이터를 얻는 가장 좋은 방법은 무엇입니까 ?
select
요소를 유지하면서 동일한 이름과 값으로 disabled
숨겨진 다른 요소 를 추가 해야 input
합니다.
SELECT를 다시 사용 가능하게하면 onchange 이벤트에서 해당 값을 숨겨진 입력에 복사하고 숨겨진 입력을 비활성화 (또는 제거)해야합니다.
데모는 다음과 같습니다.
$('#mainform').submit(function() {
$('#formdata_container').show();
$('#formdata').html($(this).serialize());
return false;
});
$('#enableselect').click(function() {
$('#mainform input[name=animal]')
.attr("disabled", true);
$('#animal-select')
.attr('disabled', false)
.attr('name', 'animal');
$('#enableselect').hide();
return false;
});
#formdata_container {
padding: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<form id="mainform">
<select id="animal-select" disabled="true">
<option value="cat" selected>Cat</option>
<option value="dog">Dog</option>
<option value="hamster">Hamster</option>
</select>
<input type="hidden" name="animal" value="cat"/>
<button id="enableselect">Enable</button>
<select name="color">
<option value="blue" selected>Blue</option>
<option value="green">Green</option>
<option value="red">Red</option>
</select>
<input type="submit"/>
</form>
</div>
<div id="formdata_container" style="display:none">
<div>Submitted data:</div>
<div id="formdata">
</div>
</div>
우리는 이것을 사용할 수도 있습니다
선택한 옵션을 제외한 모든 옵션을 비활성화하십시오.
<select>
<option disabled>1</option>
<option selected>2</option>
<option disabled>3</option>
</select>
이렇게하면 드롭 다운이 계속 작동하고 값을 제출하지만 다른 값을 선택할 수 없습니다.
제출시 선택 오브젝트를 다시 사용할 수 있습니다.
편집 : 즉, 일반적으로 select 태그를 비활성화 (disabled 속성 사용) 한 다음 양식을 제출하기 직전에 자동으로 다시 활성화하십시오.
jQuery를 사용한 예 :
비활성화하려면 :
$('#yourSelect').prop('disabled', true);
GET / POST 데이터가 포함되도록 제출하기 전에 다시 활성화하려면 다음을 수행하십시오.
$('#yourForm').on('submit', function() { $('#yourSelect').prop('disabled', false); });
또한 모든 비활성화 된 입력을 다시 활성화하거나 다음을 선택할 수 있습니다.
$('#yourForm').on('submit', function() {
$('input, select').prop('disabled', false);
});
요소에 대한 readOnly
속성을 수행하는 다른 방법은select
css
당신은 다음과 같이 할 수 있습니다 :
$('#selection').css('pointer-events','none');
<select id="countries" onfocus="this.defaultIndex=this.selectedIndex;" onchange="this.selectedIndex=this.defaultIndex;">
<option value="1">Country1</option>
<option value="2">Country2</option>
<option value="3">Country3</option>
<option value="4">Country4</option>
<option value="5">Country5</option>
<option value="6">Country6</option>
<option value="7" selected="selected">Country7</option>
<option value="8">Country8</option>
<option value="9">Country9</option>
</select>
IE 6, 7 & 8b2, Firefox 2 & 3, Opera 9.62, Windows 및 Chrome 용 Safari 3.2.1에서 테스트 및 작동
간단한 jQuery 솔루션
선택에 readonly
수업 이있는 경우 사용
jQuery('select.readonly option:not(:selected)').attr('disabled',true);
또는 선택에 readonly="readonly"
속성 이있는 경우
$('select[readonly="readonly"] option:not(:selected)').attr('disabled',true);
간단한 CSS 솔루션 :
select[readonly]{
background: #eee;
cursor:no-drop;
}
select[readonly] option{
display:none;
}
이로 인해 호버에서 "비활성화"커서가 멋진 상태로 선택되어 회색으로
표시되고 옵션 목록이 "비어 있음"을 선택하면 값을 변경할 수 없습니다.
또 다른 더 현대적인 옵션 (pun 의도하지 않은)은 선택된 요소 이외의 select 요소의 모든 옵션을 비활성화하는 것입니다.
그러나 이것은 HTML 4.0 기능이므로 6,7,8 베타 1은 이것을 존중하지 않는 것 같습니다.
http://www.gtalbot.org/BrowserBugsSection/MSIE7Bugs/OptionDisabledSupport.html
이것이 내가 찾은 최고의 솔루션입니다.
$("#YourSELECTIdHere option:not(:selected)").prop("disabled", true);
위의 코드 는 선택한 옵션을 활성화 한 상태에서 다른 모든 옵션을 비활성화 합니다. 이렇게하면 선택한 옵션이 포스트 백 데이터가됩니다.
더 쉬운 방법 : 스타일 속성을 선택 태그에 추가하십시오 .
style="pointer-events: none;"
너무 늦었다는 것을 알고 있지만 간단한 CSS로 수행 할 수 있습니다.
select[readonly] option, select[readonly] optgroup {
display: none;
}
스타일은 선택 readonly
상태에 있을 때 모든 옵션과 그룹을 숨기 므로 사용자가 선택을 변경할 수 없습니다.
자바 스크립트 해킹이 필요하지 않습니다.
이것이 가장 간단하고 최상의 솔루션입니다. 선택시 readolny attr 또는 data-readonly와 같은 다른 attr을 설정하고 다음을 수행하십시오.
$("select[readonly]").live("focus mousedown mouseup click",function(e){
e.preventDefault();
e.stopPropagation();
});
선택을 읽기 전용으로 설정하려는 경우 선택 사용 안함을 설정 한 다음 양식을 제출하기 직전에 사용 불가능한 속성을 제거하십시오.
// global variable to store original event/handler for save button
var form_save_button_func = null;
// function to get jQuery object for save button
function get_form_button_by_id(button_id) {
return jQuery("input[type=button]#"+button_id);
}
// alter value of disabled element
function set_disabled_elem_value(elem_id, value) {
jQuery("#"+elem_id).removeAttr("disabled");
jQuery("#"+elem_id).val(value);
jQuery("#"+elem_id).attr('disabled','disabled');
}
function set_form_bottom_button_save_custom_code_generic(msg) {
// save original event/handler that was either declared
// through javascript or html onclick attribute
// in a global variable
form_save_button_func = get_form_button_by_id('BtnSave').prop('onclick'); // jQuery 1.6
//form_save_button_func = get_form_button_by_id('BtnSave').prop('onclick'); // jQuery 1.7
// unbind original event/handler (can use any of following statements below)
get_form_button_by_value('BtnSave').unbind('click');
get_form_button_by_value('BtnSave').removeAttr('onclick');
// alternate save code which also calls original event/handler stored in global variable
get_form_button_by_value('BtnSave').click(function(event){
event.preventDefault();
var confirm_result = confirm(msg);
if (confirm_result) {
if (jQuery("form.anyForm").find('input[type=text], textarea, select').filter(".disabled-form-elem").length > 0) {
jQuery("form.anyForm").find('input[type=text], textarea, select').filter(".disabled-form-elem").removeAttr("disabled");
}
// disallow further editing of fields once save operation is underway
// by making them readonly
// you can also disallow form editing by showing a large transparent
// div over form such as loading animation with "Saving" message text
jQuery("form.anyForm").find('input[type=text], textarea, select').attr('ReadOnly','True');
// now execute original event/handler
form_save_button_func();
}
});
}
$(document).ready(function() {
// if you want to define save button code in javascript then define it now
// code below for record update
set_form_bottom_button_save_custom_code_generic("Do you really want to update this record?");
// code below for new record
//set_form_bottom_button_save_custom_code_generic("Do you really want to create this new record?");
// start disabling elements on form load by also adding a class to identify disabled elements
jQuery("input[type=text]#phone").addClass('disabled-form-elem').attr('disabled','disabled');
jQuery("input[type=text]#fax").addClass('disabled-form-elem').attr('disabled','disabled');
jQuery("select#country").addClass('disabled-form-elem').attr('disabled','disabled');
jQuery("textarea#address").addClass('disabled-form-elem').attr('disabled','disabled');
set_disabled_elem_value('phone', '123121231');
set_disabled_elem_value('fax', '123123123');
set_disabled_elem_value('country', 'Pakistan');
set_disabled_elem_value('address', 'address');
}); // end of $(document).ready function
선택 할 수없는 옵션을 비활성화하는 것 외에도 실제로 목록에서 사라지게하고 싶었지만 나중에 다시 활성화해야 할 수도 있습니다.
$("select[readonly]").find("option:not(:selected)").hide().attr("disabled",true);
읽기 전용 속성을 가진 모든 선택 요소를 찾은 다음 선택되지 않은 선택 내에서 모든 옵션을 찾은 다음 숨기고 비활성화합니다.
jquery는 코드를 오른쪽에서 왼쪽으로 읽으므로 성능상의 이유로 jquery 쿼리를 2로 분리하는 것이 중요합니다.
$("select[readonly] option:not(:selected)")
먼저 문서에서 선택되지 않은 모든 옵션을 찾은 다음 읽기 전용 속성으로 선택 내부에있는 옵션을 필터링합니다.
간단한 서버 측 접근 방법 중 하나는 선택하려는 옵션을 제외한 모든 옵션을 제거하는 것입니다. 따라서 Zend Framework 1.12에서 $ element가 Zend_Form_Element_Select 인 경우 :
$value = $element->getValue();
$options = $element->getAttrib('options');
$sole_option = array($value => $options[$value]);
$element->setAttrib('options', $sole_option);
양식 필드를 비활성화하면 양식이 제출 될 때 전송되지 않습니다. 따라서 readonly
작동 disabled
하지만 값을 보내는 것이 필요한 경우 다음을 수행하십시오.
요소의 읽기 전용 속성이 변경된 후
$('select.readonly option:not(:selected)').attr('disabled',true);
$('select:not([readonly]) option').removeAttr('disabled');
tabindex가있는 솔루션. 선택뿐만 아니라 텍스트 입력에서도 작동합니다.
.disabled 클래스를 사용하십시오.
CSS :
.disabled {
pointer-events:none; /* No cursor */
background-color: #eee; /* Gray background */
}
JS :
$(".disabled").attr("tabindex", "-1");
HTML :
<select class="disabled">
<option value="0">0</option>
</select>
<input type="text" class="disabled" />
편집 : Internet Explorer를 사용하려면 다음 JS도 필요합니다.
$(document).on("mousedown", ".disabled", function (e) {
e.preventDefault();
});
Grant Wagners의 제안에 따라; 다음은 직접적인 onXXX 속성 대신 핸들러 함수를 사용하여 수행하는 jQuery 스 니펫입니다.
var readonlySelect = function(selector, makeReadonly) {
$(selector).filter("select").each(function(i){
var select = $(this);
//remove any existing readonly handler
if(this.readonlyFn) select.unbind("change", this.readonlyFn);
if(this.readonlyIndex) this.readonlyIndex = null;
if(makeReadonly) {
this.readonlyIndex = this.selectedIndex;
this.readonlyFn = function(){
this.selectedIndex = this.readonlyIndex;
};
select.bind("change", this.readonlyFn);
}
});
};
jquery로 해결했습니다.
$("select.myselect").bind("focus", function(){
if($(this).hasClass('readonly'))
{
$(this).blur();
return;
}
});
jquery validate를 사용하는 경우 다음을 수행 할 수 있습니다 .disabled 속성을 문제없이 사용했습니다.
$(function(){
$('#myform').validate({
submitHandler:function(form){
$('select').removeAttr('disabled');
form.submit();
}
});
});
내가 찾은 것은 일반 자바 스크립트 (예 : JQuery 라이브러리가 필요하지 않음)와 함께 훌륭하게 작동합니다. <select>
태그 의 innerHTML을 원하는 단일 값 으로 변경하는 것 입니다.
전에:
<select name='day' id='day'>
<option>SUN</option>
<option>MON</option>
<option>TUE</option>
<option>WED</option>
<option>THU</option>
<option>FRI</option>
<option>SAT</option>
</select>
샘플 자바 스크립트 :
document.getElementById('day').innerHTML = '<option>FRI</option>';
후:
<select name='day' id='day'>
<option>FRI</option>
</select>
이런 식으로, 눈에 띄는 효과가 변경되지 않으며,이 안에 POST / GET됩니다 <FORM>
.
선택 자체 대신 현재 선택된 옵션을 제외한 모든 옵션을 비활성화 할 수 있습니다. 이렇게하면 작동하는 드롭 다운 모양이 표시되지만 전달하려는 옵션 만 유효한 선택입니다.
html 솔루션 :
<select onfocus="this.blur();">
자바 스크립트 것들 :
selectElement.addEventListener("focus", selectElement.blur, true);
selectElement.attachEvent("focus", selectElement.blur); //thanks, IE
제거:
selectElement.removeEventListener("focus", selectElement.blur, true);
selectElement.detachEvent("focus", selectElement.blur); //thanks, IE
편집 : 제거 방법 추가
양식을 제출하기 전에 disabled 속성을 제거하십시오.
$('form').submit(function () {
$("#Id_Unidade").attr("disabled", false);
});
<select id="case_reason" name="case_reason" disabled="disabled">
disabled="disabled" ->
데이터베이스에서 값을 가져 와서 양식에 표시합니다. readonly="readonly" ->
선택 상자에서 값을 변경할 수 있지만 값을 데이터베이스에 저장할 수 없습니다.
선택 드롭 다운이 출생 이후 읽기 전용이며 전혀 변경할 필요가 없다면 다른 컨트롤을 대신 사용해야합니까? 단순하고 <div>
(숨겨진 양식 필드) 또는 <input type="text">
?
추가 : 드롭 다운이 항상 읽기 전용이 아니고 JavaScript를 사용 / 사용하지 않도록 설정하는 경우 여전히 해결책입니다. 즉시 DOM을 수정하십시오.
아래는 나를 위해 일했습니다 :
$('select[name=country]').attr("disabled", "disabled");
선택 상자를 숨기고 span
정보 값으로 그 자리에 표시하여 관리했습니다 . .readonly
수업 을 사용 중지하는 경우 .toVanish
요소 를 제거 하고 표시해야 .toShow
합니다.
$( '.readonly' ).live( 'focus', function(e) {
$( this ).attr( 'readonly', 'readonly' )
if( $( this ).get(0).tagName == 'SELECT' ) {
$( this ).before( '<span class="toVanish readonly" style="border:1px solid; padding:5px">'
+ $( this ).find( 'option:selected' ).html() + '</span>' )
$( this ).addClass( 'toShow' )
$( this ).hide()
}
});
IE에서는 두 번 클릭하여 onfocus => onblur 접근 방식을 물리 칠 수있었습니다. 그러나 가치를 기억하고 onchange 이벤트에서 복원하면 그 문제를 처리하는 것처럼 보입니다.
<select onfocus="this.oldvalue=this.value;this.blur();" onchange="this.value=this.oldvalue;">
....
</select>
javascript 변수를 사용하여 expando 속성없이 유사한 작업을 수행 할 수 있습니다.
다음은 사용자 정의 jQuery 함수를 사용하여 기능을 달성하려는 시도입니다 (여기에서 언급 한 바와 같이).
$(function(){
$.prototype.toggleDisable = function(flag) {
// prepare some values
var selectId = $(this).attr('id');
var hiddenId = selectId + 'hidden';
if (flag) {
// disable the select - however this will not submit the value of the select
// a new hidden form element will be created below to compensate for the
// non-submitted select value
$(this).attr('disabled', true);
// gather attributes
var selectVal = $(this).val();
var selectName = $(this).attr('name');
// creates a hidden form element to submit the value of the disabled select
$(this).parents('form').append($('<input></input>').
attr('type', 'hidden').
attr('id', hiddenId).
attr('name', selectName).
val(selectVal) );
} else {
// remove the newly-created hidden form element
$(this).parents('form').remove(hiddenId);
// enable back the element
$(this).removeAttr('disabled');
}
}
// Usage
// $('#some_select_element').toggleDisable(true);
// $('#some_select_element').toggleDisable(false);
});
참고 URL : https://stackoverflow.com/questions/368813/html-form-readonly-select-tag-input
'Programming' 카테고리의 다른 글
사제 권한을 수정하는 방법? (0) | 2020.02.10 |
---|---|
equal ?, eql ?, === 및 ==의 차이점은 무엇입니까? (0) | 2020.02.10 |
DTO, VO, POJO, JavaBeans의 차이점은 무엇입니까? (0) | 2020.02.10 |
단일 Visual Studio 세션에서 파일의 두 인스턴스 열기 (0) | 2020.02.10 |
C ++ 코드 파일 확장자? (0) | 2020.02.10 |