javascript - with - اكواد جافا سكربت جاهزة




HTML شكل readonly SELECT tag/input (20)

أسلوب واحد بسيط من جانب الخادم هو إزالة كافة الخيارات فيما عدا الخيار الذي تريد تحديده. وبالتالي ، في Zend Framework 1.12 ، إذا كان العنصر $ هو Zend_Form_Element_Select:

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

وفقًا لمواصفات HTML ، لا تحتوي علامة select في HTML على سمة readonly ، إلا سمة disabled . لذلك إذا كنت ترغب في منع المستخدم من تغيير القائمة المنسدلة ، فيجب عليك استخدام disabled .

تكمن المشكلة الوحيدة في عدم إدخال مدخلات نماذج HTML المعطلة في بيانات POST / GET.

ما هي أفضل طريقة لمحاكاة السمة readonly لعلامة محددة ، وما زالت تحصل على بيانات POST؟


أسهل: إضافة سمة النمط إلى علامة تحديد :

style="pointer-events: none;"

أنا حلها مع مسج:

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

إذا قمت بتعطيل حقل نموذج ، فلن يتم إرسال هذا عند إرسال النموذج. لذا إذا كنت بحاجة إلى قراءة تعمل مثل disabled قيم الإرسال تفعل ذلك:

بعد أي تغيير في خصائص readonly لعنصر.

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

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

إذا كنت تستخدم ميزة التحقق من صحة مسجِّل ، فيمكنك القيام بما يلي أدناه ، استخدمت السمة المُعطلة بدون مشكلة:

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

إليك محاولة لاستخدام وظيفة 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);

});

بالإضافة إلى تعطيل الخيارات التي يجب أن لا تكون قابلة للتحديد ، أردت أن أختفي من القائمة ، ولكن لا أزال قادراً على تمكينها إذا احتجت إلى ما يلي:

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

هذا يعثر على كل العناصر المحددة ذات خاصية readonly ، ثم يعثر على كل الخيارات داخل تلك الاختيارات التي لم يتم تحديدها ، ثم يقوم بإخفائها وتعطيلها.

من المهم فصل استعلام jquery في 2 لأسباب تتعلق بالأداء ، لأن jquery يقرأها من اليمين إلى اليسار ، الرمز:

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

سيعثر أولاً على جميع الخيارات غير المحددة في المستند ثم يقوم بتصفية تلك الموجودة داخل الاختيارات ذات السمة readonly.


ببساطة ، قم بإزالة سمة المعوقين قبل إرسال النموذج.

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

تمكنت من ذلك بإخفاء مربع التحديد وإظهار 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()
            }
    });

حل CSS بسيط:

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

select[readonly] option{
    display:none;
}

ينتج عن هذا الاختيار أن يكون رماديًا مع وجود مؤشر "تعطيل" لطيف على الماوس
وعلى اختيار قائمة الخيارات "فارغة" بحيث لا يمكنك تغيير قيمتها.


حل أتش تي أم أل:

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

javascript منها:

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

تحرير: إضافة طرق إزالة


طريقة أخرى لعمل خاصية readOnly لعنصر select هي استخدام css

يمكنك فعل ما يلي:

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

DEMO


في IE كنت قادرا على هزيمة onfocus => نهج onblur عن طريق النقر المزدوج. لكن تذكر القيمة واستعادتها في حدث "التغيير" يبدو أنه يتعامل مع هذه القضية.

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

يمكنك القيام بالمثل دون خصائص expando باستخدام متغير javascript.


قم بتعيين التعطيل عند التخطيط ليكون للقراءة فقط ثم قم بإزالة السمة المعطلة قبل إرسال النموذج.

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

متابعة من اقتراح Grant Wagners ؛ في ما يلي مقتطف jQuery يعمل مع وظائف المعالج بدلاً من سمات XXX المباشرة:

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

};

هذا هو أبسط وأفضل الحلول. سوف تقوم بتعيين attr readolny على تحديد الخاص بك ، أو anyother attr مثل البيانات للقراءة فقط ، وقم بما يلي

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

هناك خيار آخر أكثر معاصرة (لا يقصد التورية) هو تعطيل جميع الخيارات الخاصة بعنصر التحديد ، ثم اختيار الخيار الآخر.

لاحظ أن هذا هو ميزة HTML 4.0 و ie 6،7،8 beta 1 يبدو أنه لا يحترم ذلك.

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


يجب عليك الحفاظ على disabled عنصر select ولكن أيضًا إضافة 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="disabled">1</option>
<option selected="selected">2</option>
<option disabled="disabled">3</option>
</select>

بهذه الطريقة ، لا تزال القائمة المنسدلة تعمل (وتقدم قيمتها) ولكن لا يمكن للمستخدم تحديد قيمة أخرى.

Demo


    var selectedOpt;//initialize var
    var newIdForHidden;//initialize var
    $('.disabledOnEdit').focusin(function(){
        selectedOpt = $(this).find(":selected").val();
        newIdForHidden = $(this).attr('id')+'Hidden';
        //alert(selectedOpt+','+newIdForHidden);
        $(this).append('');
        $(this).find('input.hiddenSelectedOpt').attr('id',newIdForHidden).val(selectedOpt);
    });
    $('.disabledOnEdit').focusout(function(){
        var oldSelectedValue=$(this).find('input.hiddenSelectedOpt').val();
        $(this).val(oldSelectedValue);
    });




html