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속성을 수행하는 다른 방법은selectcss

당신은 다음과 같이 할 수 있습니다 :

$('#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);

위의 코드 는 선택한 옵션을 활성화 한 상태에서 다른 모든 옵션을 비활성화 합니다. 이렇게하면 선택한 옵션이 포스트 백 데이터가됩니다.

너무 늦다는 것을 알고 있지만 간단한 CSS로 수행 할 수 있습니다.

select[readonly] option, select[readonly] optgroup {
    display: none;
}

스타일은 선택 readonly상태에 있을 때 모든 옵션과 그룹을 숨기 므로 사용자가 선택을 변경할 수 없습니다.

자바 스크립트 해킹이 필요하지 않습니다.

더 쉬운 방법 : 스타일 태그를 선택 태그에 추가하십시오 .

style="pointer-events: none;"

이것이 가장 간단하고 최상의 솔루션입니다. 선택시 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);

});