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




html (25)

<select id="countries" onfocus="this.defaultIndex=this.selectedIndex;" onchange="this.selectedIndex=this.defaultIndex;">
<option value="1">Country1</option>
<option value="2">Country2</option>
<option value="3">Country3</option>
<option value="4">Country4</option>
<option value="5">Country5</option>
<option value="6">Country6</option>
<option value="7" selected="selected">Country7</option>
<option value="8">Country8</option>
<option value="9">Country9</option>
</select>

विंडोज़ और Google क्रोम के लिए आईई 6, 7 और 8 बी 2, फ़ायरफ़ॉक्स 2 और 3, ओपेरा 9.62, सफारी 3.2.1 में परीक्षण और काम करना।

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

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

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


एक सरल सर्वर-साइड दृष्टिकोण सभी विकल्पों को हटाने के लिए है जिसे आप चुनना चाहते हैं। इस प्रकार, ज़ेंड फ्रेमवर्क 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 4.0 सुविधा है और यानी 6,7,8 बीटा 1 इस पर सम्मान नहीं करता है।

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


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

<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

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


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

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

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

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


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

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


आप सबमिट पर चयनित ऑब्जेक्ट को फिर से सक्षम कर सकते हैं।

संपादित करें : यानी, आमतौर पर चयन टैग को अक्षम करना (अक्षम विशेषता के साथ) और उसके बाद फॉर्म सबमिट करने से पहले इसे स्वचालित रूप से पुनः सक्षम करना:

JQuery के साथ उदाहरण:

  • इसे अक्षम करने के लिए:

    $('#yourSelect').prop('disabled', true);
    
  • सबमिट करने से पहले इसे पुनः सक्षम करने के लिए ताकि GET / POST डेटा शामिल हो:

    $('#yourForm').on('submit', function() {
        $('#yourSelect').prop('disabled', false);
    });
    

इसके अतिरिक्त, आप प्रत्येक अक्षम इनपुट को फिर से सक्षम कर सकते हैं या चुन सकते हैं:

$('#yourForm').on('submit', function() {
    $('input, select').prop('disabled', false);
});

सरल jQuery समाधान

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

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

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

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

DEMO


उन विकल्पों को अक्षम करने के अलावा जिन्हें चयन नहीं किया जाना चाहिए, मैं वास्तव में उन्हें सूची से गायब करना चाहता था, लेकिन फिर भी उन्हें सक्षम करने में सक्षम होना चाहिए जिन्हें मुझे बाद में करना चाहिए:

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

यह सभी चुनिंदा तत्वों को एक पाठक विशेषता के साथ पाता है, फिर उन चयनों के अंदर सभी विकल्पों को पाता है जिन्हें चुना नहीं जाता है, फिर यह उन्हें छुपाता है और उन्हें अक्षम करता है।

प्रदर्शन कारणों से jquery क्वेरी को 2 में अलग करना महत्वपूर्ण है, क्योंकि jquery उन्हें दाएं से बाएं से पढ़ता है, कोड:

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

पहले दस्तावेज़ में सभी अचयनित विकल्प पाएंगे और फिर उन पाठकों को फ़िल्टर करें जो अंदरूनी विशेषता के साथ चयन करते हैं।


यदि आप कोई फॉर्म फ़ील्ड अक्षम करते हैं, तो फॉर्म सबमिट होने पर यह नहीं भेजा जाएगा। इसलिए यदि आपको एक readonly आवश्यकता है जो disabled तरह काम करता है लेकिन मूल्य भेजना यह करता है:

किसी तत्व के केवल पढ़ने योग्य गुणों में किसी भी बदलाव के बाद।

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

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

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

$(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]{
    background: #eee;
    cursor:no-drop;
}

select[readonly] option{
    display:none;
}

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


एकाधिक का चयन करें उपर्युक्त कोड सुझावों के साथ-साथ प्रतिक्रिया नहीं देता है। बहुत से sledgehammering और kludging के साथ, मैं इसके साथ समाप्त हो गया:

var thisId="";
var thisVal="";
function selectAll(){
    $("#"+thisId+" option").each(function(){
        if(!$(this).prop("disabled"))$(this).prop("selected",true);
    });
    $("#"+thisId).prop("disabled",false);
}
$(document).ready(function(){
    $("select option:not(:selected)").attr('disabled',true);
    $("select[multiple]").focus(function(){
        thisId=$(this).prop("id");
        thisVal=$(this).val();
        $(this).prop("disabled",true).blur();
        setTimeout("selectAll();",200);
    });
});

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

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

<select>
<option disabled="disabled">1</option>
<option selected="selected">2</option>
<option disabled="disabled">3</option>
</select>

इस तरह ड्रॉपडाउन अभी भी काम करता है (और इसके मूल्य को प्रस्तुत करता है) लेकिन उपयोगकर्ता कोई अन्य मूल्य नहीं चुन सकता है।

Demo


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

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

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


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

style="pointer-events: none;"

आपको 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>


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

यह सबसे सरल और सबसे अच्छा समाधान है। आप अपने चयन पर एक पठनीय एटीआर सेट करेंगे, या डेटा-रीडोनली जैसे किसी अन्य एटीआर को सेट करेंगे, और निम्न कार्य करेंगे

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

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

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

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

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

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

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


यह काम करना चाहिए:

$("input[name='radioName']:checked").val()

इनपुट के चारों ओर उपयोग किए गए नोट को नोट करें: पीटर जे के समाधान की तरह चेक किया गया है और नहीं







javascript html