HTML formu salt okunur SELECT etiketi / girişi

HTML spesifikasyonlarına göre, HTML'deki selectetiketin bir readonlyözelliği yoktur, yalnızca bir disabledözelliği vardır. Dolayısıyla, kullanıcının açılır listeyi değiştirmesini önlemek istiyorsanız, kullanmanız gerekir disabled.

Tek sorun, devre dışı bırakılmış HTML form girişlerinin POST / GET verilerine dahil edilmemesidir.

readonlyBir selectetiketin özelliğini taklit etmenin ve yine de POST verilerini almanın en iyi yolu nedir ?

selectÖğeyi tutmalı, aynı ad ve değere sahip disabledgizli bir inputtane daha eklemelisiniz .

SELECT'inizi yeniden etkinleştirirseniz, değerini bir onchange olayında gizli girişe kopyalamalı ve gizli girişi devre dışı bırakmalısınız (veya kaldırmalısınız).

İşte bir demo:

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

Bunu da kullanabiliriz

Seçilen seçenek hariç tümünü devre dışı bırak:

<select>
    <option disabled>1</option>
    <option selected>2</option>
    <option disabled>3</option>
</select>

Bu şekilde açılır menü hala çalışır (ve değerini gönderir), ancak kullanıcı başka bir değer seçemez.

gösteri

Gönderme sırasında seçme nesnesini yeniden etkinleştirebilirsiniz.

DÜZENLE : yani, normalde seçme etiketini devre dışı bırakma (devre dışı niteliği ile) ve ardından formu göndermeden hemen önce otomatik olarak yeniden etkinleştirme:

JQuery ile örnek:

• Devre dışı bırakmak için:

  $('#yourSelect').prop('disabled', true);

• GET / POST verilerinin eklenmesini sağlamak için göndermeden önce yeniden etkinleştirmek için:

  $('#yourForm').on('submit', function() {
      $('#yourSelect').prop('disabled', false);
  });

Ayrıca, devre dışı bırakılan her girişi yeniden etkinleştirebilir veya aşağıdakileri seçebilirsiniz:

$('#yourForm').on('submit', function() {
    $('input, select').prop('disabled', false);
});

readOnlybir selectöğeye öznitelik yapmanın başka bir yolu dacss

şunları yapabilirsiniz:

$('#selection').css('pointer-events','none');

DEMO

<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>

Windows ve Google Chrome için IE 6, 7 ve 8b2, Firefox 2 ve 3, Opera 9.62, Safari 3.2.1'de test edildi ve çalışıyor.

Basit jQuery çözümü

Seçimleriniz readonlysınıfa sahipse bunu kullanın

jQuery('select.readonly option:not(:selected)').attr('disabled',true);

Veya seçimlerinizde bu readonly="readonly"özellik varsa

$('select[readonly="readonly"] option:not(:selected)').attr('disabled',true);

Basit CSS çözümü:

select[readonly]{
    background: #eee;
    cursor:no-drop;
}

select[readonly] option{
    display:none;
}

Bu, fareyle üzerine gelindiğinde hoş bir "devre dışı bırak" imleci ile gri renkte seç ile sonuçlanır
ve seçenekler listesinde "boş" olur, böylece değerini değiştiremezsiniz.

Yine daha çağdaş bir seçenek (punto amaçlı değil), seçilen öğeden başka seçili öğenin tüm seçeneklerini devre dışı bırakmaktır.

ancak bunun bir HTML 4.0 özelliği olduğunu ve 6,7,8 beta 1'in buna saygı göstermediğini unutmayın.

http://www.gtalbot.org/BrowserBugsSection/MSIE7Bugs/OptionDisabledSupport.html

Bulduğum en iyi çözüm bu:

$("#YourSELECTIdHere option:not(:selected)").prop("disabled", true);

Yukarıdaki kod , seçili seçeneği etkin tutarken seçilmeyen diğer tüm seçenekleri devre dışı bırakır . Bu, seçilen seçeneğin geri gönderme verilerine girmesini sağlar.

Çok geç olduğunu biliyorum, ancak basit CSS ile yapılabilir:

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

Seçim sırasında stil, tüm seçenekleri ve grupları gizler readonly , böylece kullanıcı seçimini değiştiremez.

JavaScript korsanlığı gerekmez.

Daha kolay: Stil etiketini seçtiğiniz etikete ekleyin :

style="pointer-events: none;"

Bu en basit ve en iyi çözümdür. Seçiminize bir salt okunur yıpranma veya salt okunur veri gibi bir yıpranma atacak ve aşağıdakileri yapacaksınız

$("select[readonly]").live("focus mousedown mouseup click",function(e){
    e.preventDefault();
    e.stopPropagation();
});

Salt okunur olmasını planladığınızda devre dışı bırakılan seçimi ayarlayın ve sonra formu göndermeden hemen önce devre dışı bırakılan özniteliği kaldırın.

// 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

Seçilebilir olmaması gereken seçenekleri devre dışı bırakmanın yanı sıra, aslında onları listeden dissapear yapmak istedim, ancak yine de daha sonra gerekmesi durumunda bunları etkinleştirebilmeyi istedim:

$("select[readonly]").find("option:not(:selected)").hide().attr("disabled",true);

Bu, salt okunur özniteliğe sahip tüm seçme öğelerini bulur, ardından seçili olmayanların içindeki seçili olmayan tüm seçenekleri bulur, sonra bunları gizler ve devre dışı bırakır.

Performans nedenleriyle jquery sorgusunu 2'de ayırmak önemlidir, çünkü jquery bunları sağdan sola doğru okur, kod:

$("select[readonly] option:not(:selected)")

önce belgedeki tüm seçili olmayan seçenekleri bulur ve sonra seçili olanları salt okunur bir öznitelikle filtreler.

Basit bir sunucu tarafı yaklaşımı, seçilmesini istediğiniz seçenek dışındaki tüm seçenekleri kaldırmaktır. Bu nedenle, Zend Framework 1.12'de, $ öğesi bir Zend_Form_Element_Select ise:

 $value =  $element->getValue();
 $options = $element->getAttrib('options');
 $sole_option = array($value => $options[$value]);
 $element->setAttrib('options', $sole_option);

Bir form alanını devre dışı bırakırsanız, form gönderildiğinde bu gönderilmez. Yani ihtiyacınız olan bir readonlyşeye ihtiyacınız varsadisabled ancak değer göndermek için :

Bir öğenin salt okunur özelliklerinde herhangi bir değişiklikten sonra.

$('select.readonly option:not(:selected)').attr('disabled',true);

$('select:not([readonly]) option').removeAttr('disabled');

Tabindex ile çözüm. Seçme ile aynı zamanda metin girişleriyle de çalışır.

Sadece bir .disabled sınıfı kullanın.

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" />

Düzenleme: Internet Explorer ile, bu JS'ye de ihtiyacınız vardır:

$(document).on("mousedown", ".disabled", function (e) {
    e.preventDefault();
});

Grant Wagners'ın önerisinden sonra; burada doğrudan onXXX öznitelikleri yerine işleyici işlevleriyle çalışan bir jQuery snippet'i vardır:

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 ile çözdüm:

      $("select.myselect").bind("focus", function(){
        if($(this).hasClass('readonly'))
        {
          $(this).blur();   
          return;
        }
      });

Jquery validate kullanıyorsanız, aşağıdakileri yapabilirsiniz, devre dışı bırakılmış özniteliği sorunsuz bir şekilde kullandım:

$(function(){
    $('#myform').validate({
        submitHandler:function(form){
            $('select').removeAttr('disabled');
            form.submit();
        }
    });
});

Ne buldum, düz javascript (yani: hiçbir JQuery kitaplığı gerekli) ile harika çalışıyor, içHTML değiştirmek için <select> etiketi istenen tek kalan değere değiştirmektir.

Önce:

<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>

Örnek Javascript:

document.getElementById('day').innerHTML = '<option>FRI</option>';

Sonra:

<select name='day' id='day'>
  <option>FRI</option>
</select>

Bu şekilde hiçbir görsel etki değişmez ve bu POST / GET içinde <FORM>.

Seçimin kendisinden ziyade, seçili olan seçenek dışındaki tüm seçenekleri devre dışı bırakabilirsiniz. Bu, çalışan bir açılır menü görünümü verir, ancak yalnızca iletilmesini istediğiniz seçenek geçerli bir seçimdir.

html çözümü:

<select onfocus="this.blur();">

javascript olanlar:

selectElement.addEventListener("focus", selectElement.blur, true); selectElement.attachEvent("focus", selectElement.blur); //thanks, IE

ayırmak:

selectElement.removeEventListener("focus", selectElement.blur, true); selectElement.detachEvent("focus", selectElement.blur); //thanks, IE

edit: eklenen kaldırma yöntemleri

Formu göndermeden önce devre dışı bırakılmış özniteliği kaldırın.

    $('form').submit(function () {
        $("#Id_Unidade").attr("disabled", false);
    });

<select id="case_reason" name="case_reason" disabled="disabled">

disabled="disabled" ->veritabanından değerini alacak ve formda gösterecektir. readonly="readonly" ->selectbox'ta değerinizi değiştirebilirsiniz, ancak değeriniz veritabanınıza kaydedilemedi.

Seçme açılır menüsü doğumdan beri salt okunursa ve hiç değişmesi gerekmiyorsa, bunun yerine başka bir denetim kullanmalısınız? Basit <div>(artı gizli form alanı) veya<input type="text"> ?

Eklendi: Açılır menü her zaman salt okunur değilse ve JavaScript'i etkinleştirmek / devre dışı bırakmak için kullanılıyorsa, bu hala bir çözümdür - DOM'u anında değiştirin.

Aşağıda benim için çalıştı:

$('select[name=country]').attr("disabled", "disabled"); 

Seçim kutusunu gizleyerek ve spanyalnızca bilgi değeri olan bir yerinde göstererek başardım . .readonlySınıfı devre dışı bırakma durumunda , .toVanishöğeleri kaldırmamız ve bunları göstermemiz gerekir .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'de onfocus => onblur yaklaşımını çift tıklatarak yenebildim. Ancak değeri hatırlamak ve onchange olayında geri yüklemek bu sorunu ele alıyor gibi görünüyor.

<select onfocus="this.oldvalue=this.value;this.blur();" onchange="this.value=this.oldvalue;">
....
</select>

Bir javascript değişkeni kullanarak genişletme özellikleri olmadan benzer bir işlem yapabilirsiniz.

İşte işlevselliği (burada belirtildiği gibi) elde etmek için özel bir jQuery işlevini kullanma denemesi:

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

});