Formulir HTML hanya dibaca tag / input SELECT

Menurut spesifikasi HTML, selecttag dalam HTML tidak memiliki readonlyatribut, hanya disabledatribut. Jadi jika Anda ingin mencegah pengguna mengubah dropdown, Anda harus menggunakannya disabled.

Satu-satunya masalah adalah bahwa input formulir HTML yang dinonaktifkan tidak dimasukkan dalam data POST / GET.

Apa cara terbaik untuk meniru readonlyatribut untuk sebuah selecttag, dan masih mendapatkan data POST?

Anda harus menjaga selectelemen disabledtetapi juga menambahkan elemen lain yang tersembunyi inputdengan nama dan nilai yang sama.

Jika Anda mengaktifkan kembali SELECT Anda, Anda harus menyalin nilainya ke input tersembunyi di acara pertukaran dan menonaktifkan (atau menghapus) input tersembunyi.

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

Kita juga bisa menggunakan ini

Nonaktifkan semua kecuali opsi yang dipilih:

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

Dengan cara ini dropdown masih berfungsi (dan mengirimkan nilainya) tetapi pengguna tidak dapat memilih nilai lain.

Demo

Anda dapat mengaktifkan kembali objek yang dipilih saat mengirim.

EDIT : yaitu, biasanya menonaktifkan tag pilih (dengan atribut yang dinonaktifkan) dan kemudian mengaktifkannya kembali secara otomatis sebelum mengirimkan formulir:

Contoh dengan jQuery:

• Untuk menonaktifkannya:

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

• Untuk mengaktifkannya kembali sebelum pengiriman sehingga GET / POST data disertakan:

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

Selain itu, Anda dapat mengaktifkan kembali setiap input yang dinonaktifkan atau memilih:

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

Cara lain untuk melakukan readOnlyatribut ke suatu selectelemen adalah dengan menggunakancss

Anda bisa melakukan seperti:

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

Diuji dan bekerja di IE 6, 7 & 8b2, Firefox 2 & 3, Opera 9.62, Safari 3.2.1 untuk Windows dan Google Chrome.

Solusi jQuery sederhana

Gunakan ini jika pilihan Anda memiliki readonlykelas

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

Atau ini jika pilihan Anda memiliki readonly="readonly"atribut

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

Solusi CSS sederhana:

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

select[readonly] option{
    display:none;
}

Ini menghasilkan Pilih menjadi abu-abu dengan kursor "nonaktifkan" yang bagus saat di arahkan
dan pilih daftar opsi "kosong" sehingga Anda tidak dapat mengubah nilainya.

Namun pilihan lain yang lebih kontemporer (tidak ada permainan kata-kata) adalah untuk menonaktifkan semua opsi dari elemen pilih selain yang dipilih.

Namun perlu dicatat bahwa ini adalah fitur HTML 4.0 dan 6,7,8 beta 1 tampaknya tidak menghargai ini.

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

Ini adalah solusi terbaik yang saya temukan:

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

Kode di atas menonaktifkan semua opsi lain yang tidak dipilih sambil tetap mengaktifkan opsi yang dipilih. Dengan melakukan itu, opsi yang dipilih akan membuatnya menjadi data post-back.

Saya tahu ini sudah sangat terlambat, tetapi dapat dilakukan dengan CSS sederhana:

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

Gaya menyembunyikan semua opsi dan grup saat pilih readonly keadaan, sehingga pengguna tidak dapat mengubah pilihannya.

Tidak diperlukan retasan JavaScript.

Masih lebih mudah: tambahkan atribut style ke tag pilihan Anda :

style="pointer-events: none;"

Ini adalah solusi paling sederhana dan terbaik. Anda akan menetapkan attr readolny pada pilih Anda, atau attr lain seperti data-readonly, dan melakukan hal berikut

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

Tetapkan pilih yang dinonaktifkan ketika Anda berencana untuk hanya-baca dan kemudian hapus atribut yang dinonaktifkan sebelum mengirimkan formulir.

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

Selain menonaktifkan opsi yang seharusnya tidak dapat dipilih, saya ingin benar-benar membuatnya menghilang dari daftar, tetapi masih dapat mengaktifkannya jika saya perlu nanti:

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

Ini menemukan semua elemen terpilih dengan atribut readonly, kemudian menemukan semua opsi di dalam pilihan yang tidak dipilih, lalu menyembunyikannya dan menonaktifkannya.

Penting untuk memisahkan kueri jquery dalam 2 untuk alasan kinerja, karena jquery membacanya dari kanan ke kiri, kode:

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

pertama-tama akan menemukan semua opsi yang tidak dipilih dalam dokumen dan kemudian menyaring yang ada di dalam memilih dengan atribut readonly.

Satu pendekatan sisi server yang sederhana adalah menghapus semua opsi kecuali yang ingin Anda pilih. Jadi, dalam Zend Framework 1.12, jika $ element adalah Zend_Form_Element_Select:

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

Jika Anda menonaktifkan bidang formulir, ini tidak akan dikirim ketika formulir dikirimkan. Jadi jika Anda membutuhkan readonlyyang berfungsi sepertidisabled tetapi mengirim nilai lakukan ini:

Setelah perubahan apa pun pada properti hanya baca dari suatu elemen.

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

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

Solusi dengan tabindex. Bekerja dengan input teks terpilih tetapi juga.

Cukup gunakan kelas .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" />

Sunting: Dengan Internet Explorer, Anda juga memerlukan JS ini:

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

Sebagai lanjutan dari saran Grant Wagners; di sini adalah snippet jQuery yang melakukannya dengan fungsi handler alih-alih atribut onXXX langsung:

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

};

Saya mengatasinya dengan jquery:

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

Jika Anda menggunakan validasi jquery, Anda dapat melakukan hal berikut di bawah ini, saya menggunakan atribut yang dinonaktifkan tanpa masalah:

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

Apa yang saya temukan berfungsi dengan baik, dengan javascript biasa (yaitu: tidak diperlukan pustaka JQuery), adalah mengubah innerHTML dari <select>tag ke nilai tersisa yang diinginkan.

Sebelum:

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

Contoh Javascript:

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

Setelah:

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

Dengan cara ini, tidak ada perubahan efek visual, dan ini akan POST / GET dalam <FORM>.

Daripada memilih itu sendiri, Anda dapat menonaktifkan semua opsi kecuali untuk opsi yang saat ini dipilih. Ini memberikan tampilan drop-down yang berfungsi, tetapi hanya opsi yang ingin Anda sampaikan merupakan pilihan yang valid.

solusi html:

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

yang javascript:

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

untuk menghapus:

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

edit: menambahkan metode hapus

Cukup, hapus atribut yang dinonaktifkan sebelum mengirimkan formulir.

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

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

disabled="disabled" ->akan mendapatkan nilai Anda dari database dan menunjukkannya di formulir. readonly="readonly" ->Anda dapat mengubah nilai Anda di kotak pilih, tetapi nilai Anda tidak bisa disimpan dalam database Anda.

Jika dropdown pilih hanya-baca sejak lahir dan tidak perlu diubah sama sekali, mungkin Anda harus menggunakan kontrol lain? Seperti <div>bidang formulir sederhana (plus bidang tersembunyi) atau <input type="text">?

Ditambahkan: Jika dropdown tidak hanya-baca sepanjang waktu dan JavaScript digunakan untuk mengaktifkan / menonaktifkannya, maka ini masih merupakan solusi - cukup modifikasi DOM sambil jalan.

Di bawah ini bekerja untuk saya:

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

Saya mengelolanya dengan menyembunyikan kotak pilih dan menunjukkan spandi tempatnya dengan hanya nilai informasi. Pada saat menonaktifkan .readonlykelas, kita juga perlu menghapus .toVanishelemen - elemen dan menunjukkannya .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()
            }
    });

Di IE saya bisa mengalahkan pendekatan onfocus => onblur dengan mengklik ganda. Tetapi mengingat nilainya dan mengembalikannya di acara pertukaran tampaknya menangani masalah itu.

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

Anda dapat melakukan hal serupa tanpa memperluas properti dengan menggunakan variabel javascript.

Berikut adalah upaya untuk menggunakan fungsi jQuery khusus untuk mencapai fungsionalitas (seperti yang disebutkan di sini):

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

});