點擊標籤上不檢查相關的複選框

我已經strugling與衝擊jQtransform了一個錯誤：點擊標籤上不檢查相關的複選框

當您單擊關聯到一個複選框的標籤上，爲「視覺」檢查框，但在提交時表格，它沒有發送。 （所以只檢查jqTransform層而不是真正的複選框），考慮到與無線電同樣的情況

- >它的工作原理

上的複選框照片直接點擊 - >它的工作原理

$.fn.jqTransCheckBox = function(){ 
return this.each(function(){ 
    if($(this).hasClass('jqTransformHidden')) {return;} 

    var $input = $(this); 
    var inputSelf = this; 

    //set the click on the label 
    oLabel = jqTransformGetLabel($input); 
    oLabel && oLabel.click(function(){aLink.trigger('click');}); // -> Bug here ? 

    var aLink = $('<a href="#" class="jqTransformCheckbox"></a>'); 
    //wrap and add the link 
    $input.addClass('jqTransformHidden').wrap('<span class="jqTransformCheckboxWrapper"></span>').parent().prepend(aLink); 
    //on change, change the class of the link 
       $input.change(function(){ 
        inputSelf.checked && aLink.addClass('jqTransformChecked') || aLink.removeClass('jqTransformChecked'); 
        return true; 
       }); 
    // Click Handler, trigger the click and change event on the input 
    aLink.click(function(){ 
     //do nothing if the original input is disabled 
     if($input.attr('disabled')){return false;} 
     //trigger the envents on the input object 
         $(this).toggleClass('jqTransformChecked'); 
     $input.trigger('click').trigger("change"); 
     return false; 
    }); 

    // set the default state 
    this.checked && aLink.addClass('jqTransformChecked'); 
});

};

感謝

來源

2011-11-28 sf_tristanb

所以，這是一個錯誤報告？ – Blazemonger

不是因爲我想找到解決方案，如果你有線索，歡迎;-) –

對於那些不使用jQuery ..我有這個問題（標籤不檢查複選框）在我的Angular 2應用程序。去除'for'屬性有助於瀏覽器點擊複選框**兩次**，因爲上帝知道什麼原因。感謝@Petar – kub1x

看起來aLink.trigger('click')由於某種原因調用不起作用。我通過更換這行解決了這個問題：用

oLabel && oLabel.click(function(){aLink.trigger('click');});

如下：

oLabel && oLabel.click(function(){ 
    var forAttr = null; 
    if(forAttr = $(this).attr('for')) { 
     var element = $(this).siblings('#' + forAttr); 
     if(element.length) { 
      element.trigger('click'); 
     } 
    } 
    else { 
     aLink.trigger('click'); 
    } 
});

這樣做有什麼檢查在標籤的兄弟姐妹在其「爲」屬性的元素，如果該元素存在它使用它，而不是aLink。我使用兄弟姐妹，因爲它比搜索整個文檔快。如有需要，請隨時更改。

希望這會有所幫助。

編輯：好的，我可能會用這個答案衝進去。我的解決方案在很多層面都是錯誤的

我認爲實際發生的事情是單擊標籤會導致雙擊。因此，點擊標籤時，會觸發默認點擊以檢查元素，並在取消選中複選框後立即觸發另一次點擊。

我以前的解決方案實際上並沒有做任何事情，只是防止第二次調用，因爲沒有任何條件實際通過（'＃'+ forAttr元素不是兄弟姐妹）。

我發現只是用錯誤行註釋掉修復了這個問題。

來源

2012-11-06 13:50:06

什麼我發現這是

<input type="checkbox" name="sexi" id="test" /> 
<label>Female</label>

作品，但這

<input type="checkbox" name="sexi" id="test" /> 
<label for="test">Female</label>

不

兩個作品無線電輸入！

第一種方法工作的原因其實是因爲在複選框的情況下，當您單擊該標籤點擊觸發兩次

我試圖修復代碼中的錯誤，但相同的代碼被用於廣播和複選框...嗯..

來源

2012-01-30 16:23:26 Petar

你搖滾！我在這裏搜索Angular 2/Bootstrap 4問題差不多5年後，你的回答挽救了我的屁股;） – kub1x

@ kub1x很高興能幫到你！誰會期望這在2017年仍然是一個問題：D – Petar

我不確定這是否是同樣的問題，但當單選按鈕被轉換時，單擊它們的標籤將讓他們全部檢查，雖然發佈的值是正確的。

在我看來，問題是與jqTransformGetLabel。

它嘗試使用next（）獲取標籤，如果不起作用，則使用prev（）。這隻在DOM中傳播一個級別。更改

var oLabel = objfield.next();

到

var oLabel = $(objfield.find('label').get(0));

和

oLabel = objfield.prev();

到

oLabel = $(objfield.parents('label').get(0));

內jqTransformGetLabel似乎來解決這個問題對我來說。

來源

2012-04-20 14:01:25

由於Vlad Cazacu提到這個問題是由於雙擊（默認的一個和點擊函數中調用的）引起的。

爲了避免我們不得不返回false默認事件：

oLabel && oLabel.click(function() { aLink.trigger('click'); return false; });

至少它爲我工作:)

來源

2014-09-02 10:52:17 kbalcerek

點擊標籤上不檢查相關的複選框

回答

相關問題