Bir <select> form alanının devre dışı bırakıldığında gönderilmesini nasıl sağlayabilirim?

select"Değeri salt okunur" olarak işaretlemek istediğiniz bir form alanı var, kullanıcı değeri değiştiremezsiniz, ancak değer hala formla birlikte gönderilir. disabledÖzniteliğin kullanılması, kullanıcının değeri değiştirmesini engeller, ancak değeri formla birlikte göndermez.

readonlyNitelik için mevcuttur inputve textareaalanlar, ancak benim istediğim temelde bu. Bunu çalıştırmanın bir yolu var mı?

Düşündüğüm iki olasılık:

• Devre selectdışı bırakmak yerine, tüm öğeleri devre dışı optionbırakın ve seçimi devre dışı bırakmak için CSS kullanın.
• Formu göndermeden önce devre dışı bırakılan tüm açılır menüleri etkinleştirmesi için gönder düğmesine bir tıklama olay işleyicisi ekleyin.

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

select_nameNormalde vereceğiniz ad nerede <select>.

Başka seçenek.

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

Şimdi bununla, hangi web sunucusunu kullandığınıza bağlı olarak, hiddengirdiyi önce veya sonra koymak zorunda kalacağınızı fark ettim <select>.

Eğer hafızam bana doğru bir şekilde hizmet veriyorsa, IIS ile daha önce koyarsınız, sonra Apache ile koyarsınız. Her zaman olduğu gibi, test anahtardır.

Alanları devre dışı bırakın ve form gönderilmeden önce bunları etkinleştirin:

jQuery kodu:

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

Bunun için bir çözüm arıyordum ve bu iş parçacığında bir çözüm bulamadığım için kendim yaptım.

// With jQuery
$('#selectbox').focus(function(e) {
    $(this).blur();
});

Basit, yalnızca odaklandığınızda alanı bulanıklaştırırsınız, devre dışı bırakmak gibi bir şeydir, ancak aslında verilerini gönderirsiniz.

Biraz farklı bir senaryo ile karşı karşıya kaldım, çünkü sadece kullanıcının seçilen değeri önceki bir selectbox'a göre değiştirmesine izin vermek istemedim. Yaptığım şey, sadece selectbox'ta seçili olmayan diğer tüm seçenekleri devre dışı bırakmaktı.

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

JQuery kullanmadan Tres tarafından önerilen çözüm

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

Bu, birisinin daha fazla anlamasına yardımcı olabilir, ancak açıkçası jQuery'den daha az esnektir.

seçili alanlar için giriş seçiciyle çalışmıyor: bunu kullanın:

    jQuery(function() {

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

    });

Seçimlerdeki seçenekleri devre dışı bırakmak için sonraki kodu kullanıyorum

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

Bulduğum en kolay yol, formunuza bağlı küçük bir javascript işlevi oluşturmaktı:

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

ve buraya formunuzda diyorsunuz:

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

Veya formunuzu kontrol etmek için kullandığınız işlevde arayabilirsiniz :)

Göndermeden önce bir satır ekleyin.

$ ( "# XYZ") removeAttr ( "özürlü.");

Veya seçimin adını değiştirmek ve devre dışı bırakmak için JavaScript kullanın. Bu şekilde seçim yine de gönderilir, ancak kontrol etmediğiniz bir ad kullanılır.

Bir giriş devre dışı bırakıldığında değeri bir veri alanına kaydeden hızlı (yalnızca Jquery) bir eklenti çırptım. Bu, alanın .prop () veya .attr () kullanılarak jquery aracılığıyla programlı olarak devre dışı bırakıldığı sürece, değere .val (), .serialize () veya .serializeArra () ile erişilmesi her zaman devre dışı olsa bile değer :)

Utanmaz fiş: https://github.com/Jezternz/jq-disabled-inputs

Ürdün'ün çözümüne dayanarak, geçersiz hale getirmek istediğiniz seçimin aynı adı ve aynı değeri olan gizli bir girişi otomatik olarak oluşturan bir işlev oluşturdum. İlk parametre bir id veya bir jquery öğesi olabilir; ikincisi, "true" değerinin devre dışı bırakıldığı ve "false" değerinin girişi etkinleştirdiği Boole isteğe bağlı bir parametredir. Atlanırsa, ikinci parametre seçimi "etkin" ve "devre dışı" arasında değiştirir.

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

Uygulanabilir bir çözüm buldum: seçilen çözüm dışındaki tüm öğeleri kaldırın. Daha sonra stili, devre dışı görünen bir şeyle de değiştirebilirsiniz. JQuery kullanma:

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

<select id="example">
    <option value="">please select</option>
    <option value="0" >one</option>
    <option value="1">two</option>
</select>



if (condition){
    //you can't select
    $("#example").find("option").css("display","none");
}else{
   //you can select
   $("#example").find("option").css("display","block");
}

Başka bir seçenek de salt okunur özniteliğini kullanmaktır.

<select readonly="readonly">
    ....
</select>

Salt okunurken değer hala gönderilir, giriş alanı grileşir ve kullanıcı değeri düzenleyemez.

Düzenle:

Alıntı sahibi http://www.w3.org/TR/html401/interact/forms.html#adef-readonly :

• Salt okunur öğeler odak alır, ancak kullanıcı tarafından değiştirilemez.
• Sekme navigasyonunda salt okunur öğeler bulunur.
• Salt okunur öğeler başarılı olabilir.

O eleman başarılı olabilir dediğinde, bunun anlamı olabilir burada belirtildiği gibi, sunulacak: http://www.w3.org/TR/html401/interact/forms.html#successful-controls