क्या लोगों को इससे अधिक चेकबॉक्स चुनने से रोकने का कोई बेहतर तरीका है?

मैं चाहता हूं कि स्क्रिप्ट गतिशील हो, लागू वर्ग के आधार पर, जिसमें हमेशा अधिकतम मान की अनुमति होगी (उदाहरण के लिए "limit_1" या "limit_2")।

वर्तमान में, मैं प्रति वर्ग उदाहरण एक फ़ंक्शन बना रहा हूं, लेकिन यह कुल ओवरकिल जैसा लगता है।

क्या कक्षा से नंबर लेने और जांच और अलर्ट दोनों के लिए फ़ंक्शन के भीतर इसका उपयोग करने का कोई बेहतर तरीका है?

$('.limit_1 input[type=checkbox]').on('change', function (e) {
    if ($('.limit_1 input[type=checkbox]:checked').length > 1) {
        $(this).prop('checked', false);
        alert("allowed only 1");
    }
});

$('.limit_2 input[type=checkbox]').on('change', function (e) {
    if ($('.limit_2 input[type=checkbox]:checked').length > 2) {
        $(this).prop('checked', false);
        alert("allowed only 2");
    }
});
0
user1235285 29 मार्च 2018, 09:25

3 जवाब

सबसे बढ़िया उत्तर

आप पहले .siblings() पद्धति का उपयोग करके अपना कोड साफ़ कर सकते हैं। इसके अलावा, आप चेकबॉक्स के प्रत्यक्ष माता-पिता के लिए एक HTML डेटा-* विशेषता जोड़ सकते हैं, जिसका मूल्य आपके परिवर्तन ईवेंट के साथ पुनर्प्राप्त किया जाता है। इस दृष्टिकोण के साथ, आप एकल ईवेंट श्रोता का उपयोग कर सकते हैं।

इसके अलावा, यह अलग सीमा वर्गों को परिभाषित करने से बच जाएगा, जिसके लिए आपको उस वर्ग स्ट्रिंग में हेरफेर करने की आवश्यकता होगी जहां सीमा हार्डकोड है। डेटा-* विशेषता के माध्यम से सीमाओं को गतिशील रूप से परिभाषित और पुनर्प्राप्त करना क्लीनर है।

//Parent elements HTML for checkboxes

<div class="checkbox-container" data-limit="2">
   //Checkboxes with lower limit
</div>

<div class="checkbox-container" data-limit="3">
   //Checkboxes with higher limit
</div>


//JS
$('.checkbox-class').on('change', function(e) {
   var limit = parseInt($(this).parent().data("limit"));
   if($(this).siblings(':checked').length >= limit) {
       this.checked = false;
       alert("The limit is " + limit)
   }
});

यह रहा एक fiddle

1
Greg Brodzik 30 मार्च 2018, 18:37

मुझे यह वास्तव में मिल गया है ...

$('.step input[type=checkbox]').on('change', function() {
    var num = $(this).parent().parent().parent().parent().attr('class').match(/\d+$/)[0];
    if ($('.limit_'+num+' input[type=checkbox]:checked').length > num) {
        $(this).prop('checked', false);
        alert("allowed only "+num);
    };
});
0
user1235285 29 मार्च 2018, 07:09

उन्हें limit_1, limit_2, ... जैसे limitedChecked को समान कक्षा दें

इस वर्ग पर ईवेंट हैंडलर बेस जोड़ें

    $('.limitedChecked input[type=checkbox]').on('change', function(){
        var limit = $(this).parent().attr("class").split(" ").find(element =>element.startsWith("limit_")).slice(-1);

        if ($('.limit_'+ limit +' input[type=checkbox]:checked').length > limit) {
            $(this).prop('checked', false);
            alert("allowed only " + limit);
        }
    })

फिर कक्षा से .limit_1 प्राप्त करें और इस स्ट्रिंग का अंतिम वर्ण प्राप्त करें

यह रहा Jsfiddle

0
Hikarunomemory 29 मार्च 2018, 06:58