Jquery複選框.prop點擊防止默認行爲

最近我一直在處理很多複選框。我遇到了這個'問題'與.prevenDefault()點擊事件，我試圖找到一個解決方案。在我的情況下，我希望能夠決定是否可以根據其他字段選中/取消選中複選框。有時我甚至不得不在事件發生前打開一個對話框。這聽起來比它結果容易...Jquery複選框.prop點擊防止默認行爲

在this jsFiddle你可以看到什麼問題，以及我如何試圖解決它（見下面的代碼以及）。大多數答案暗示使用更改而不是點擊。但比你不能使用.preventdefault()。

$('div').off('change','.wtf').on('change', '.wtf', function(e) { 
    //e.preventDefault(); 
    //return false; 
    if($(this).prop('checked') == true) { 
     alert('I am true now, but I must stay false'); 
     $(this).prop('checked', false); 
    } 
    else { 
     alert('I am false now, but I must stay true'); 
     $(this).prop('checked', true); 
    } 
});

這是最好的解決方案嗎？或者還有其他方法可以使複選框等待直到允許它改變它的狀態嗎？

作爲例子：我想只有取消選中該複選框，如果用戶通過點擊「確定」按鈕，在對話框的消息一致。

來源

2013-04-25 Brainfeeder

複選框是一種特殊情況，其中change事件和click可以互相替換，因爲change event也是通過單擊複選框觸發的。

也就是說click和change之間唯一的一個很大的區別是.preventDefault()的可用性。如果使用除點擊以外的其他方法更改複選框的值，則更改事件會更好。

在這種情況下，您可以選擇您喜歡的任何一種。一個例子是：Fiddle here

$('input[type="checkbox"]').on('change', function() { 
    var ch = $(this), c; 
    if (ch.is(':checked')) { 
     ch.prop('checked', false); 
     c = confirm('Do you?'); 
     if (c) { 
      ch.prop('checked', true); 
     } 
    } else { 
     ch.prop('checked', true); 
     c = confirm('Are you sure?'); 
     if (c) { 
      ch.prop('checked', false); 
     } 
    } 
});

來源

2013-04-25 11:21:17 Spokey

感謝您的回答的功能。不過，如果您與其他表單元素處理進行比較，我仍然發現這些複選框有些不合邏輯... – Brainfeeder 2013-04-25 12:26:29

確實如此，它們有點不同，因爲它們具有值，但也處於開/關狀態（已選中或未選中）。這使他們更棘手。 – Spokey 2013-04-25 12:31:14

另請注意，點擊和更改事件在Firefox和Chrome上觸發的方式不同。 Firefox：首先點擊，然後更改。 Chrome：先改變，然後點擊。 – 2013-11-15 14:15:42

我已經實現Spokey解決方案基於一些修改，停止使用return如果confirm()回報true

$("input[name='status']").change(function(e){ 
     if ($(this).is(':checked')){ 
      msg = "{{__('The set status will be Active again! Are you sure?')}}" 
      a = confirm(msg); 
      if (a){ 
       return true; 
      } 
      $(this).prop('checked',false) 
     } 
     else{ 
      msg = "{{__('The set will be Inactive! Are you sure?')}}" 
      a = confirm(msg); 
      if (a){ 
       return true; 
      } 
      $(this).prop('checked',true); 
     } 
    })

來源

2017-11-26 21:17:44 SaidbakR

Jquery複選框.prop點擊防止默認行爲

回答

相關問題