इनपुट चेकबॉक्स को टॉगल करने से लेबल रोकें

Question

मेरे पास निम्न HTML कोड है। लेबल पर क्लिक करते समय यह चेकबॉक्स को टॉगल करता है।

<td><label for="startClientFromWebEnabled">Client Launch From Web:</label></td> 
<td><input type="checkbox" id="startClientFromWebEnabled" name="startClientFromWebEnabled" data-bind="checked: StartClientFromWebEnabled, enable: IsEditable" onchange="startClientFromWebToggleRequiredAttribute()" /></td> 

मैं इसे कैसे रोक सकता हूं? अगर मैं for="startClientFromWebEnabled" निकालने के लिए, यह टॉगल बंद हो जाता है, लेकिन मैं इस की जरूरत है क्योंकि मैं कुछ तर्क यह है कि तत्व यह है कि गतिविधि सक्रिय करने से आईडी लेता है ...

Answer 1

सबसे अच्छा समाधान लेबल चेकबॉक्स टॉगल के रूप में है कि सहज और अपेक्षित व्यवहार है यह बताने के लिए किया जाएगा।

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

<input type="checkbox" data-myid="1" /> 
 
<label data-myid="1">foo</label>

अंतिम उपाय के

आप jQuery का उपयोग कर click घटना के डिफ़ॉल्ट व्यवहार को रोका जा सकता है:

$('label[for="startClientFromWebEnabled"]').click(function(e) { 
    e.preventDefault(); 
});​ 

उदाहरण के लिए कृपया इस jsFiddle देखते हैं।

Answer 2

अगर आप JQuery का उपयोग कर रहे हैं, एक id अपने लेबल पर तो जोड़ने अपनी स्क्रिप्ट में इस जोड़ें:

$("#lbl").click(function(){ 
    return false; 
}); 

Answer 3

आप for -attribute को दूर कर सकता है, अगर आप कहीं और आईडी की दुकान "मैं कुछ तर्क यह है कि तत्व से आईडी लेता है।" एक data-* -attribute में उदाहरण के लिए:

<label data-input-id="startClientFromWebEnabled"> 

दूसरी ओर, यह कभी कभी बात और एक एक चेक-बॉक्स स्टाइल और उपयोगकर्ता की क्षमताओं के आधार पर क्लिक करने के लिए मुश्किल है। for-सामग्री का उपयोग करने के अच्छे कारण हैं।

Answer 4

वहाँ सीएसएस समाधान भी है:

label { 
    pointer-events: none; 
    cursor: default; 
}