HTML form readonly SELECT tag/input

前端 未结 30 2353
陌清茗
陌清茗 2020-11-22 08:28

According to HTML specs, the select tag in HTML doesn\'t have a readonly attribute, only a disabled attribute. So if you want to keep

相关标签:
30条回答
  • 2020-11-22 08:56

    Set the select disabled when you plan for it to be read-only and then remove the disabled attribute just before submitting the form.

    // 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
    
    0 讨论(0)
  • 2020-11-22 08:56
    <select id="case_reason" name="case_reason" disabled="disabled">
    

    disabled="disabled" ->will get your value from database dan show it in the form. readonly="readonly" ->you can change your value in selectbox, but your value couldn't save in your database.

    0 讨论(0)
  • 2020-11-22 08:57

    Easier still: add the style attribute to your select tag:

    style="pointer-events: none;"
    
    0 讨论(0)
  • 2020-11-22 08:59

    What I found works great, with plain javascript (ie: no JQuery library required), is to change the innerHTML of the <select> tag to the desired single remaining value.

    Before:

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

    Sample Javascript:

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

    After:

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

    This way, no visiual effect change, and this will POST/GET within the <FORM>.

    0 讨论(0)
  • 2020-11-22 09:02

    In IE I was able to defeat the onfocus=>onblur approach by double-clicking. But remembering the value and then restoring it in the onchange event seems to handle that issue.

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

    You can do similar without expando properties by using a javascript variable.

    0 讨论(0)
  • 2020-11-22 09:03

    another way of doing a readOnly attribute to a select element is by using css

    you could do like :

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

    DEMO

    0 讨论(0)
提交回复
热议问题