HTML formu salt okunur SELECT etiketi / girişi


587

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 ?


5
Sunucu tarafı için buna güvenmeyin. Herkes kendi HTML sayfasını oluşturabilir ve bunu RW yapabilir.
Brendan Byrd

11
Ama bu PHP'ye özgü bir soru değil.
Kaleb Brasee

4
Bu durumda bir select öğesi kullanmamanızı öneririm. Değeri yalnızca düz metin olarak görüntüleyememenizin bir nedeni var mı?
Büyük McLargeHuge

2
@ppumkin yorumunuzun bir anlamı yok. Seçili veya gizli form alanları için asla iyi bir kullanım durumu olmadığını söylemiyorum. OP sayfada bazı metinleri görüntülemekte sorun yaşıyordu ve bu durumda bir select öğesini kullanmanın amacının ne olduğunu merak ediyordum.
Büyük McLargeHuge

2
Yanlış soruyu okumalıyım. Kullanıcıyı değiştirmemek için seçimi devre dışı bırakmak istediğini söylüyor. Belki de sayfayı seçimlerle oluşturması ve değişiklikleri önlemek için jquery kullanması gerekir. Ama geri gönderdiğinde bunun için veri yok. Ben de aynısını yapıyordum. Diğer seçimler tarafından filtrelenen seçimleri görüntülemek gerekir ve önceki tüm kilitli olması gerekir böylece son açılan aşağı ajax üzerinden DB kaydeder. Sayfayı yeniden oluşturduğumda, evet, Tamam- Seçimler yerine etiketleri görüntüleyebilirim. Ama sorun bu değil :)
Piotr Kula

Yanıtlar:


461

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>


5
Seçimi yeniden etkinleştirirseniz, elbette gizli girişi de (değeri açıklandıktan sonra kopyaladıktan sonra) devre dışı bırakmalı veya kaldırmalısınız. Aksi takdirde çift olarak gönderilen değeri alırsınız
Adam

1
@max Ah !. Tamam, bu da işe yarıyor. Ben yo gizli girdi seçin bir adı vardı "aynı adı" olması gerektiğini söyledi varsaymıştı.
Adam

2
Çoklu seçim kullanıyorsam ne olur?
Anyul Rivas

2
Aynı adlara sahip iki öğeye sahip olmak, yalnızca son etkin girişi / seçileni geri gönderir, çift değil. Ayrıca, yalnızca selecteddeğer tüm listeye geri gönderilmez. Yani, senin hiddenönünde oturur selectve seçilen değeri tutar. Seçim "salt okunur" olarak devre dışı bırakılırsa, geri gönderme yalnızca gizli girişin değerini içerir. Seçim etkinleştirilirse, görünen seçili seçenek gizli değerin "üzerine yazılır / değiştirilir" ve bu da geri gönderilecek değerdir.
Piotr Kula

29
Bu bariz bir çözüm olsa da, başka bir giriş alanı eklemeniz gerektiğinden çözüm olarak berbat.
Donato

189

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


3
Dinamik seçenek için güzel bir tane
Diego Favero

11
Tek değerli bir SELECT etiketi için mükemmel! Ancak, kullanıcıların seçili seçeneklerden bazılarının seçimini kaldırmasına ve böylece değeri değiştirmesine izin veren bir <çoklu seç> için çalışmaz.
Mikhail Bunkin

2
Tarayıcı desteği için optionetiketinin disabledözniteliği
Jo.

4
Bu harika bir çözüm. Bu şekilde jQuery ile kolayca başarabileceğinizi ekleyeceğim: $("#yourSelectId option:not(:selected)).attr("disabled", "disabled")
Onkel-j

105

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

4
devre dışı özelliğini ayarlamak için .prop ('devre dışı', doğru / yanlış) kullanın. Özellik gerçek durumu değiştirmez.
Paris Char

Bence bu çözüm @bezmax çözümünden daha zekidir . Çünkü gizli girdi eklersek, her girişten yalnızca birinin (aynı ad) her zaman etkin olduğunu düşünmeliydik. Aksi takdirde, her iki giriş de etkinleştirildiyse, sunucu tarafında, program istisnaya neden olabilecek bir dizi girdi alacaktır (örneğin, bu durumu ele almadıysak ve bir dize bekliyoruz ve 'Request.Form [FieldName] kullanıyoruz 'command)
MiT

@Kevin,% 90'dan fazla vakada çalışıyor. Ayrıca, kemerinizde jquery olmalı ... Eh.
sitilge

Bu, kabul edilen cevabı çok daha temiz. Elemanın artık devre dışı bırakılmasını istemiyorsanız ve fazladan giriş etiketi yoksa mantığı geri almak daha kolaydır.
Haohmaru

51

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

şunları yapabilirsiniz:

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

DEMO


8
Güzel çözüm. Ancak yine de değeri klavyeyle değiştirebilirsiniz.
Mario Werner

1
Evet bu harika. Klavye ile değeri değiştirmek için öğeye SEKME yapmanız gerekir ve sonra öğe seçilir. Arka plan rengini gri veya devre dışı bırakırsanız, kullanıcıya aslında devre dışı bırakılmadığında "devre dışı" olduğunu görsel olarak da bildirirsiniz. Artık kimse IE'yi desteklemiyor, bu yüzden kimin umurunda. Önlemek istiyorsanız, varsayılan olarak bir tuş kilidi önleme de koyabilirsiniz.
Piotr Kula

Oldukça alışılmadık !! ... .on('mouseover', function(){ ... });
Seçimin

pointer-events: nonefare imlecinden odaklanmayı önler. Ayrıca klavyeden odaklanmayı önlemek için, tüm odak olaylarına hemen bulanıklaştırarak bunu tamamlayabilirsiniz:$('select').css('pointer-events', 'none').on('focus', function () {$(this).blur();});
Quinn Comendant

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


15
Buradaki sorun, açılır listenin salt okunur değilmiş gibi görüntülenmesidir. Kullanıcı işin işe yaramayacağını düşünecek ...
Lukas Eder

8
Bu, kullanıcı için kafa karıştırıcıdır, çünkü yine de bir seçenek seçebilirler, ancak seçtiklerinde liste daha önce seçilen değere geri döner. Kullanıcının herhangi bir şey seçmesini önlemek için listeyi devre dışı bırakmak çok daha sezgiseldir.
Dana

11
Benzer bir sorun yaşadım ve sadece seçilen seçeneği görüntüleyerek çözdüm. JS gerekmez, kullanıcı için daha az karışıklık ... <select id="countries"> <option value="7" selected="selected">Country7</option> </select>
Potherca

1
@ppumkin @dana @LukasEder Hayır .. bu UX'i düzeltebiliyorsanız. Örneğin, onchange = 'this.selectedIndex=this.defaultIndex; alert("You should not change this..");'sadece seçilen dizini sessizce değiştirmek yerine böyle bir şey yapabilirsiniz ..
Fr0zenFyr

1
@LukasEder Anketi yanıtlayan deneyim hakkında temkinli olanlar için, açılır listenin değiştirilmemesi gerektiğini gerçekten vurgulamak için biraz CSS ekleyebilirler. İmleci not-allowedve arka plan rengini olarak ayarlayın #CCC.
Alexander Dixon

36

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

7
Lütfen kodunuzu biraz açıklayın. Seçili öğelere 'salt okunur' bir sınıf eklememiz gerekiyor mu? Bu kodu ne zaman çağırmalıyız: yalnızca belgede. Zaten veya bir seçim etkinleştirildiğinde / devre dışı bırakıldığında? Kod noscriptiniz güvenli mi?
anar khalilov

$(document).ready(function(){$('select option:not(:selected)').attr('disabled',true);});tek seçimde iyi çalışıyor. "Salt okunur" sınıf gerekmez. Birden fazla seçim sorunludur, çünkü zaten seçili olan ve bu nedenle devre dışı bırakılmamış birden fazla seçenek varsa ve bir kullanıcı devre dışı bırakılmamış seçeneklerden birini seçerse, daha önce seçilen diğer seçeneklerin seçimi kaldırılır.
gordon

bunların hiçbirini anlamıyorum.
Piotr Kula

"Salt okunur" sınıftaki seçim kutuları için seçilenin dışındaki seçenekleri devre dışı bırakır. Elinizde seçme elemanı varsa, şunları yazabilirsiniz:$select.find('option').not(':selected').attr('disabled', 'disabled');
Semra

1
Bu çözümü seviyorum. Seçiciyi select[readonly]öğeye salt okunur özniteliği ekleyeceğiniz şekilde değiştiririm - bu şekilde seçimleri diğer türlerden farklı şekilde ele almanız gerekmez. Javascript daha sonra efekti arttırır. Bu çözümün (ve diğerlerinin çoğunun) yalnızca kullanıcı aracısının en iyi kullanıcı deneyimini sağlamasına yardımcı olduğunu unutmayın - aslında hiçbir şey zorlamaz (gerekirse sunucu tarafında yapılması gerekir).
jgivoni

21

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.


1
CSRF doğrulamanız varsa (symfony ve diğer birçok çerçevede olduğu gibi), çalışmaz.
ThEBiShOp


11

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.


11

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


Güzel ve basit. Bunu sevdim.
Jonathan Parent Lévesque

Bu soruna çok güzel bir çözüm. Teşekkür ederim!
OderWat

10

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

style="pointer-events: none;"

Benim için iş ama işaretçi olaylar çapraz tarayıcılar destek yapacak?
Abhijit Jagtap

3
Bu işe yaramaz. Kullanıcı girişi klavyeyi kullanarak değiştirebilir.
Sandhu

6

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

1
buraya keyup ad keydown eklemeniz gerekir, bununla birlikte açılır liste buna "sekme" yaparak da erişilebilir ve değeri değiştirmek için ok tuşlarını kullanabilirsiniz.
apfz

5

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

Bu, gerçekleşmeyi bekleyen bir yarış durumu gibi geliyor.
Brendan Byrd

5

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.


Belki .prop("disabled", true)yerine
sam

4

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

4

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

4

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

2

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

};

2

Jquery ile çözdüm:

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

Fareyle üzerine gelme animasyonu yine de tıklanabilir görünen bir açılır ok gösterecek olsa da, bu çok güzel çalıştı.
Johncl

Chrome 26'da bu benim için çalışmıyor: seçim hala tamamen işlevsel.
Andy

Ancak IE üzerinde çift tıkladığınızda liste hala görünüyor. Yine de bunu önlemek için?
user1995781

2

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

2

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


1

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.


3
Teorik olarak harika bir fikir - ancak IE8'den önce IE'de engelli seçenekler için destek YOK. tinyurl.com/yle4bto
scunliffe

1

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


@ButtleButkus javascript olanlar işe yarıyor mu? tarayıcıyla ilgili bir sorun olabilir sanırım. elemente bir tabindex eklemeye çalıştınız
Kadmillos

1

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

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

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


yanlış, kurtarıldı. 'Salt okunur' özelliği tüm tarayıcılar tarafından işlenmediği ve bu nedenle güvenilir olmadığı anlaşılıyor.
richey

0

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.


Başından beri salt okunur değil. Değiştirmek ve güncellemek için JavaScript kullanıyorum. Önceki bir açılır listenin belirli bir değeri varsa, bu salt okunur hale gelir.
Jrgns

O zaman belki bu açılır menüyü anında bir metin kutusuyla değiştirebilirsiniz?
Vilx-

Evet, ama her zaman orada gizli girdi bence daha zarif
Jrgns

0

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

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

11
Bilginize: Devre dışı bırakılmış form alanı gönderime dahil edilmez.
mz_01

0

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

0

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.


0

İş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);

});
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.