javascript - एचटीएमएल फॉर्म केवल टैग/इनपुट चुनें




html (20)

अनुदान Wagners सुझाव से निम्नलिखित; यहां एक jQuery स्निपेट है जो इसे सीधे एक्सबॉक्स गुणों के बजाय हैंडलर फ़ंक्शंस के साथ करता है:

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

};

एचटीएमएल चश्मे के मुताबिक, एचटीएमएल में select टैग में केवल एक disabled विशेषता नहीं है, केवल एक disabled विशेषता है। इसलिए यदि आप उपयोगकर्ता को ड्रॉपडाउन बदलने से रोकना चाहते हैं, तो आपको disabled का उपयोग करना होगा।

एकमात्र समस्या यह है कि अक्षम एचटीएमएल फॉर्म इनपुट POST / GET डेटा में शामिल नहीं होते हैं।

एक select टैग के लिए readonly विशेषता का अनुकरण करने का सबसे अच्छा तरीका क्या है, और अभी भी POST डेटा प्राप्त करें?


आईई में मैं डबल-क्लिक करके ऑनफोकस => ऑनब्लूर दृष्टिकोण को हराने में सक्षम था। लेकिन मान को याद रखना और फिर इसे बदले में ईवेंट में बहाल करना उस मुद्दे को संभालने लगता है।

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

आप जावास्क्रिप्ट चर का उपयोग कर विस्तारित गुणों के बिना समान कर सकते हैं।


आपको select तत्व को disabled रखना चाहिए, लेकिन उसी नाम और मूल्य के साथ एक और छुपा input भी जोड़ना चाहिए।

यदि आप अपने चयन को पुन: सक्षम करते हैं, तो आपको अपने मूल्य को एक बदले हुए ईवेंट में छिपे हुए इनपुट में कॉपी करना चाहिए और छिपे हुए इनपुट को अक्षम (या हटाएं)।

यहां एक डेमो है:

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


आसान अभी भी: अपने चयन टैग में शैली विशेषता जोड़ें:

style="pointer-events: none;"

एक readOnly एक और तरीका एक select तत्व के लिए readOnly विशेषता css का उपयोग कर है

आप ऐसा कर सकते हैं:

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

DEMO


एक सरल सर्वर-साइड दृष्टिकोण सभी विकल्पों को हटाने के लिए है जिसे आप चुनना चाहते हैं। इस प्रकार, ज़ेंड फ्रेमवर्क 1.12 में, यदि $ तत्व एक Zend_Form_Element_Select है:

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

एचटीएमएल समाधान:

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

जावास्क्रिप्ट वाले:

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

संपादित करें: हटाए गए तरीकों को जोड़ा गया


कार्यक्षमता प्राप्त करने के लिए कस्टम 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);

});

जो मैंने पाया वह सादा जावास्क्रिप्ट (यानी: कोई JQuery लाइब्रेरी आवश्यक) के साथ महान काम करता है, वांछित एकल शेष मूल्य पर <select> टैग के आंतरिक <select> को बदलना है।

पहले:

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

नमूना जावास्क्रिप्ट:

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

बाद:

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

इस तरह, कोई दृश्य प्रभाव नहीं बदलता है, और यह <FORM> भीतर पोस्ट / प्राप्त होगा।


फिर भी एक और अधिक समकालीन विकल्प (कोई इरादा नहीं है) चुनिंदा तत्व के सभी विकल्पों को चुनने के लिए चुना गया है।

ध्यान दें कि यह एक HTML 4.0 सुविधा है और यानी 6,7,8 बीटा 1 इस पर सम्मान नहीं करता है।

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


मुझे पता है कि यह बहुत देर हो चुकी है, लेकिन यह सरल सीएसएस के साथ किया जा सकता है:

select[readonly] option, select[readonly] optgroup {
    display: none;
}

शैली सभी विकल्पों और समूहों को छुपाती है जब चयन readonly राज्य में होता है, इसलिए उपयोगकर्ता अपना चयन नहीं बदल सकता है।

कोई जावास्क्रिप्ट हैक की आवश्यकता नहीं है।


मेरे लिए काम किया नीचे:

$('select[name=country]').attr("disabled", "disabled"); 

मैंने इसे चुनिंदा बॉक्स को छुपाकर और केवल सूचनात्मक मूल्य के साथ अपनी जगह में एक span दिखाकर प्रबंधित किया। .readonly कक्षा को अक्षम करने की स्थिति पर, हमें .toVanish तत्वों को हटाने और .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()
            }
    });

यदि आप jquery मान्य का उपयोग कर रहे हैं, तो आप नीचे दिए गए कार्य कर सकते हैं, मैंने बिना किसी समस्या के अक्षम अक्षमता का उपयोग किया:

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

यदि चयन ड्रॉपडाउन जन्म के बाद ही पढ़ा जाता है और इसे बदलने की आवश्यकता नहीं है, तो शायद आपको इसके बजाय एक और नियंत्रण का उपयोग करना चाहिए? एक साधारण <div> (प्लस छिपी हुई फॉर्म फ़ील्ड) या <input type="text"> ?

जोड़ा गया: यदि ड्रॉपडाउन केवल पढ़ने के लिए नहीं है और केवल जावास्क्रिप्ट को इसे सक्षम / अक्षम करने के लिए उपयोग किया जाता है, तो यह अभी भी एक समाधान है - बस डीओएम ऑन-द-फ्लाई को संशोधित करें।


यह सबसे अच्छा समाधान है जो मैंने पाया है:

$("#YourSELECTIdHere option:not(:selected)").prop("disabled", true);

उपरोक्त कोड चयनित विकल्प को सक्षम रखते हुए चयनित सभी अन्य विकल्पों को अक्षम नहीं करता है । ऐसा करने से चुना गया विकल्प इसे पोस्ट-बैक डेटा में लाएगा।


सरल jQuery समाधान

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

सरल सीएसएस समाधान:

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

select[readonly] option{
    display:none;
}

इसके परिणामस्वरूप होवर पर अच्छे "अक्षम" कर्सर के साथ ग्रे होने का चयन करें
और विकल्पों की सूची चुनने पर "खाली" है ताकि आप इसका मूल्य बदल सकें।


हम इसका इस्तेमाल भी कर सकते थे

चयनित विकल्प को छोड़कर सभी को अक्षम करें:

<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