JQuery का उपयोग करके चुनिंदा फ़ील्ड को अक्षम / सक्षम कैसे करें?

Question

मैं जैसे फॉर्म में एक विकल्प बनाना चाहूंगा

[] I would like to order a [selectbox with pizza] pizza

जहां चेकबॉक्स की जांच की जाती है और चेक न किए जाने पर अक्षम होता है, वहां केवल चयन बॉक्स सक्षम होता है।

मैं इस कोड के साथ आता हूं:

<form>
<input type="checkbox" id="pizza" name="pizza" value="yes"> <label for="pizza">
I would like to order a</label>
<select name="pizza_kind">
    <option>(choose one)</option>
    <option value="margaritha">Margaritha</option>
    <option value="hawai">Hawai</option>
</select>
pizza.
</form>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js">
</script>
<script>
var update_pizza = function () {
    if ($("#pizza").is(":checked")) {
        $("#pizza_kind").removeAttr("disabled");
    }
    else {
        $("#pizza_kind").prop('disabled', 'disabled');
    }
};

$(update_pizza);
$("#pizza").change(update_pizza);
</script>

मैं विभिन्न तरीकों की कोशिश की है कि कैसे का उपयोग कर विकलांग विशेषता निर्धारित करने .prop(), .attr()और .disabled=। हालाँकि, ऐसा कुछ नहीं होता है। <input type="checkbox">इसके बजाय आवेदन करते समय <select>, कोड पूरी तरह से काम करता है।

<select>JQuery का उपयोग करके अक्षम / सक्षम कैसे करें ?

Comments

हैलो, इस दृष्टिकोण IE 10 पर काम करता है? पता नहीं कैसे IE 10. में चयन क्षेत्र को सक्षम करने के लिए

— ROROROOROROR

Answer 1

आप इस तरह कोड का उपयोग करना चाहेंगे:

<form>
  <input type="checkbox" id="pizza" name="pizza" value="yes">
  <label for="pizza">I would like to order a</label>
  <select id="pizza_kind" name="pizza_kind">
    <option>(choose one)</option>
    <option value="margaritha">Margaritha</option>
    <option value="hawai">Hawai</option>
  </select>
  pizza.
</form>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
  var update_pizza = function () {
    if ($("#pizza").is(":checked")) {
        $('#pizza_kind').prop('disabled', false);
    }
    else {
        $('#pizza_kind').prop('disabled', 'disabled');
    }
  };
  $(update_pizza);
  $("#pizza").change(update_pizza);
</script>

यहाँ काम कर रहा उदाहरण है

Comments

$('#pizza_kind').prop('disabled', false);और $('#pizza_kind').prop('disabled', true);। जैसा कि jQuery के दस्तावेज़ कहते हैं : गुण आम तौर पर क्रमबद्ध HTML विशेषता को बदले बिना एक DOM तत्व की गतिशील स्थिति को प्रभावित करते हैं। उदाहरणों में इनपुट तत्वों की मूल्य संपत्ति, इनपुट्स और बटन की अक्षम संपत्ति या चेकबॉक्स की चेक की गई संपत्ति शामिल है। .Pr () विधि के बजाय .prop () विधि को अक्षम और जाँचने के लिए उपयोग किया जाना चाहिए। मूल्य प्राप्त करने और स्थापित करने के लिए .val () विधि का उपयोग किया जाना चाहिए।

— नौ

jQuery 3 के लिए यह "$ ('# पिज़्ज़ा_किंडन') होना चाहिए। प्रोप ('अक्षम', सत्य / असत्य);" जहाँ तक मुझे मालूम है

— Gennady G

$ क्या है (update_pizza); करते हुए? समारोह को एक jquery वस्तु में लपेटना?

— एडवर्ड

Answer 2

अपने सभी चयनों में से किसी एक आईडी या वर्ग को चुनने के लिए अक्षम / सक्षम करने में सक्षम होने के लिए। तब आप कुछ ऐसा कर सकते थे:

अक्षम:

$('#id').attr('disabled', 'disabled');

सक्षम करें:

$('#id').removeAttr('disabled');

Comments

".Prop () पद्धति का उपयोग .attr () विधि" स्रोत के बजाय अक्षम और जाँच करने के लिए किया जाना चाहिए: api.jquery.com/prop

— कॉलिन

यह चयनित उत्तर होना चाहिए .. स्किमिंग के लिए बहुत बेहतर है :)

— 17

यह जवाब नहीं होना चाहिए .removeAttr()अब झूठे jquery.com/upgrad-guide/3.0/…… stackoverflow.com/a/13626565/125981 पर

— मार्क Schultheiss

Answer 3

अक्षम , WHATWG द्वारा बताए गए चुनिंदा तत्व की बूलियन विशेषता है , इसका मतलब है कि jQuery के साथ काम करने के लिए सही तरीका होगा

jQuery("#selectId").attr('disabled',true);

इससे यह HTML बन जाएगा

<select id="selectId" name="gender" disabled="disabled">
    <option value="-1">--Select a Gender--</option>
    <option value="0">Male</option>
    <option value="1">Female</option>
</select>

यह XHTML और HTML दोनों के लिए काम करता है (W3School संदर्भ)

फिर भी इसे संपत्ति के रूप में इस्तेमाल किया जा सकता है

jQuery("#selectId").prop('disabled', 'disabled');

मिल रहा

<select id="selectId" name="gender" disabled>

जो केवल HTML के लिए काम करता है न कि XTML के लिए

नोट: एक अक्षम तत्व को इस प्रश्न के उत्तर के रूप में प्रस्तुत नहीं किया जाएगा: अक्षम किया गया फार्म तत्व प्रस्तुत नहीं किया गया है

NOTE2: एक अक्षम तत्व को बाहर निकाला जा सकता है।

नोट 3:

एक प्रपत्र नियंत्रण जो अक्षम है, उपयोगकर्ता क्लिक करने वाले स्रोत पर पंक्तिबद्ध किसी भी क्लिक घटनाओं को तत्व पर भेजे जाने से रोकना चाहिए।

टी एल; डॉ

<script>
    var update_pizza = function () {
        if ($("#pizza").is(":checked")) {
            $('#pizza_kind').attr('disabled', false);
        } else {
            $('#pizza_kind').attr('disabled', true);
        }
    };
    $(update_pizza);
    $("#pizza").change(update_pizza);
</script>

Answer 4

बस उपयोग करें:

var update_pizza = function () {
     $("#pizza_kind").prop("disabled", !$('#pizza').prop('checked'));
};

update_pizza();
$("#pizza").change(update_pizza);

डेमो

Answer 5

निम्न का उपयोग करें:

$("select").attr("disabled", "disabled");

या बस जोड़ने id="pizza_kind"के लिए <select>की तरह, टैग <select name="pizza_kind" id="pizza_kind">: jsfiddle लिंक

आपके कोड के काम न करने का कारण केवल यह है $("#pizza_kind")कि <select>तत्व का चयन नहीं किया गया है क्योंकि यह नहीं है id="pizza_kind"।

संपादित करें: वास्तव में, एक बेहतर चयनकर्ता है $("select[name='pizza_kind']"): jsfiddle लिंक

Answer 6

आपके selectपास एक आईडी नहीं है, केवल एक नाम है। आपको अपने चयनकर्ता को संशोधित करना होगा:

$("#pizza").on("click", function(){
  $("select[name='pizza_kind']").prop("disabled", !this.checked);
});

डेमो: http://jsbin.com/imokuj/2/edit

Answer 7

पुराने धागे में जवाब देने के लिए खेद है, लेकिन हो सकता है कि मेरा कोड भविष्य में अन्य की मदद करता हो। मैं उसी स्थिति में था कि जब चेक बॉक्स की जांच होगी तो कुछ चुने हुए इनपुट फ़ील्ड अन्य बुद्धिमान विकलांगों को सक्षम करेंगे।

$("[id*='chkAddressChange']").click(function () {
    var checked = $(this).is(':checked');
    if (checked) {
        $('.DisabledInputs').removeAttr('disabled');
    } else {
        $('.DisabledInputs').attr('disabled', 'disabled');
    }
});

Answer 8

अच्छा प्रश्न - मुझे लगता है कि इसे प्राप्त करने का एकमात्र तरीका चयन में वस्तुओं को फ़िल्टर करना है।
आप इसे jquery प्लगइन के माध्यम से कर सकते हैं। निम्नलिखित लिंक की जाँच करें, यह वर्णन करता है कि आपको जिस चीज़ की आवश्यकता है उसके समान कुछ हासिल करना है। धन्यवाद
jQuery चयनित रेडियो के आधार पर चयनित विकल्पों को अक्षम करें (सभी ब्राउज़रों के लिए समर्थन की आवश्यकता है)