javascript - type - select option html




كيف يتم التأكد من إرسال حقل نموذج<select> عند تعطيله؟ (10)

لدي حقل نموذج select أريد وضع علامة عليه كـ "للقراءة فقط" ، حيث لا يمكن للمستخدم تعديل القيمة ، ولكن لا يزال يتم إرسال القيمة مع النموذج. يؤدي استخدام السمة disabled إلى منع المستخدم من تغيير القيمة ، ولكنه لا يقدم القيمة مع النموذج.

السمة readonly متاحة فقط لحقول input والحقول textarea ، ولكنها في الأساس ما أريده. هل هناك طريقة للحصول على هذا العمل؟

هناك احتمالان أدركهما:

  • بدلاً من تعطيل select ، قم بتعطيل جميع option واستخدم CSS إلى اللون الرمادي خارج التحديد بحيث يبدو معطلاً.
  • إضافة معالج أحداث النقر إلى الزر إرسال بحيث يتم تمكين كافة القوائم المنسدلة المعطلة قبل إرسال النموذج.

أستخدم الرمز التالي لخيارات التعطيل في التحديدات

<select class="sel big" id="form_code" name="code" readonly="readonly">
   <option value="user_played_game" selected="true">1 Game</option>
   <option value="coins" disabled="">2 Object</option>
   <option value="event" disabled="">3 Object</option>
   <option value="level" disabled="">4 Object</option>
   <option value="game" disabled="">5 Object</option>
</select>

// Disable selection for options
$('select option:not(:selected)').each(function(){
 $(this).attr('disabled', 'disabled');
});

أنا ضربت المساعد السريع (Jquery فقط) ، الذي يحفظ القيمة في حقل بيانات بينما يتم تعطيل الإدخال. هذا يعني فقط طالما يتم تعطيل الحقل برمجيًا من خلال jquery باستخدام .prop () أو .attr () ... ثم الوصول إلى القيمة بواسطة .val () أو .serialize () أو .serializeArra () سيعود دائمًا قيمة حتى لو المعوقين :)

المكونات وقح: https://github.com/Jezternz/jq-disabled-inputs


استنادًا إلى حل الأردن ، قمت بإنشاء دالة تقوم تلقائيًا بإنشاء إدخال مخفي بنفس الاسم ونفس القيمة المحددة التي تريد أن تصبح غير صالحة. يمكن أن تكون المعلمة الأولى عبارة عن معرف أو عنصر jquery ؛ الثانية هي معلمة اختيارية منطقية حيث التعطيل "الحقيقي" و "false" يمكّن الإدخال. إذا تم حذفها ، تقوم المعلمة الثانية بتبديل التحديد بين "تمكين" و "معطلة".

function changeSelectUserManipulation(obj, disable){
    var $obj = ( typeof obj === 'string' )? $('#'+obj) : obj;
    disable = disable? !!disable : !$obj.is(':disabled');

    if(disable){
        $obj.prop('disabled', true)
            .after("<input type='hidden' id='select_user_manipulation_hidden_"+$obj.attr('id')+"' name='"+$obj.attr('name')+"' value='"+$obj.val()+"'>");
    }else{
        $obj.prop('disabled', false)
            .next("#select_user_manipulation_hidden_"+$obj.attr('id')).remove();
    }
}

changeSelectUserManipulation("select_id");

انها لا تعمل مع: محدد المدخلات لحقول مختارة ، استخدم هذا:

    jQuery(function() {

    jQuery('form').bind('submit', function() {
        jQuery(this).find(':disabled').removeAttr('disabled');
    });

    });

قم بتعطيل الحقول ثم قم بتمكينها قبل إرسال النموذج:

رمز jQuery:

jQuery(function ($) {        
  $('form').bind('submit', function () {
    $(this).find(':input').prop('disabled', false);
  });
});

كانت أسهل طريقة للعثور عليها هي إنشاء وظيفة جافا سكريبت صغيرة مرتبطة بنموذجك:

function enablePath() {
    document.getElementById('select_name').disabled= "";
}

وأنت تسميها في نموذجك هنا:

<form action="act.php" method="POST" name="form_name" onSubmit="enablePath();">

أو يمكنك الاتصال به في الوظيفة التي تستخدمها للتحقق من النموذج :)


لقد واجهت سيناريو مختلفًا بعض الشيء ، حيث أردت فقط عدم السماح للمستخدم بتغيير القيمة المحددة استنادًا إلى مربع اختيار سابق. ما انتهى بي الأمر هو مجرد تعطيل جميع الخيارات الأخرى غير المحددة في مربع التحديد باستخدام

$('#toSelect')find(':not(:selected)').attr('disabled','disabled');

لقد وجدت حلًا عمليًا: أزل جميع العناصر باستثناء العنصر المحدد. يمكنك بعد ذلك تغيير النمط إلى شيء يبدو معطلاً كذلك. باستخدام jQuery:

jQuery(function($) {
    $('form').submit(function(){
        $('select option:not(:selected)', this).remove();
    });
});

نفس الحل المقترح من قبل Tres دون استخدام jQuery

<form onsubmit="document.getElementById('mysel').disabled = false;" action="..." method="GET">

   <select id="mysel" disabled="disabled">....</select>

   <input name="submit" id="submit" type="submit" value="SEND FORM">
</form>

قد يساعد هذا الشخص على فهم المزيد ، ولكن من الواضح أنه أقل مرونة من jQuery one.


<select disabled="disabled">
    ....
</select>
<input type="hidden" name="select_name" value="selected value" />

حيث يكون select_name هو الاسم الذي تعطيه عادةً <select> .

خيار اخر.

<select name="myselect" disabled="disabled">
    <option value="myselectedvalue" selected="selected">My Value</option>
    ....
</select>
<input type="hidden" name="myselect" value="myselectedvalue" />

الآن مع هذا واحد ، لقد لاحظت أنه اعتمادا على ما هو خادم الويب الذي تستخدمه ، قد تضطر إلى وضع المدخلات hidden قبل ، أو بعد <select> .

إذا أسعفتني ذاكرتي بشكل صحيح ، فمع IIS ، ضعتها من قبل ، مع وضع Apache بعدها. كالعادة ، الاختبار هو المفتاح.





html-select