Salt okunur SEÇENEĞİNİ etiketi HTML form/giriş

SORU

15 Aralık 2008, PAZARTESİ

Salt okunur SEÇENEĞİNİ etiketi HTML form/giriş

HTML görüşler doğrultusunda, HTML select etiketi readonly bir öznitelik yok, disabled yalnızca bir öznitelik. Eğer açılan şifresi tutmak istiyorsanız, disabled kullanmak zorunda.

Tek sorun, HTML form devre dışı girişleri POST data / dahil alamadım.

Ne select etiket readonly öznitelik taklit etmek için en iyi yolu, ve hala POST veri almak?

CEVAP

15 Aralık 2008, PAZARTESİ

select eleman disabled tutmak değil, aynı zamanda aynı adı ve değeri ile başka bir input gizli eklemelisiniz.

Eğer SEÇENEĞİNİ yeniden etkinleştirmek, değiştiğinde olay gizli giriş değerini kopyalayıp (veya kaldırmak) gizli giriş devre dışı bırakmanız gerekir.

Burada bir gösteri:

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