jQuery腳本從組一個複選框的選擇，同時增加了一個複選框動態

我使用下面的jQuery腳本從一次選擇同名超過1個複選框禁用用戶jQuery腳本從組一個複選框的選擇，同時增加了一個複選框動態

$("input:checkbox").click(function() { 
    if ($(this).is(":checked")) { 
     var group = "input:checkbox[name='" + $(this).attr("name") + "']"; 
     $(group).prop("checked", false); 
     $(this).prop("checked", true); 
    } else { 
     $(this).prop("checked", false); 
    } 
});

而且不工作這裏是複選框

<div class="ChekMarkWrap"> 
    <input id="chkFilm_4" type="checkbox" name="four" style="margin-left:2px;" /><br />ﬁlm 
</div> 

<div class="ChekMarkWrap"> 
    <input id="chkTv_4" type="checkbox" name="four" /><br />tv 
</div> 

<div class="ChekMarkWrap"> 
    <input id="chkWeb_4" type="checkbox" name="four" /><br />web 
</div> 

<div class="ChekMarkWrap"> 
    <input id="chkStage_4" type="checkbox" name="four" /><br />stage 
</div>

它工作得很好，好，直到我上document.ready()

來源

2013-08-12 iJade

爲什麼不使用''元素，其目的是要做到這一點？ –

小提琴：http://jsfiddle.net/3hcFp/2/

這種方法結合click事件只有一次，所以之後的代碼已運行不會有約束的情況下添加的元素。你需要做的是建立一個監聽器來代替，像這樣的內容：

$('body').on('click', 'input:checkbox', function() { 
    // Do some stuff 
}

在小提琴，我有一個包裹form#exampleForm的複選框，並在與上面的例子所取代body。

編輯：更新提琴與現場添加更多複選框的例子。

來源

2013-08-12 07:50:51

+1爲你的好答案:) – Sergio

嘗試像添加一個新的複選框dynamically.i'm結合上面的jQuery腳本這個：

$("body").on('click',input:checkbox,function() { 
    if ($(this).is(":checked")) { 
     var group = "input:checkbox[name='" + $(this).attr("name") + "']"; 
     $(group).prop("checked", false); 
     $(this).prop("checked", true); 
    } else { 
     $(this).prop("checked", false); 
    } 
});

當你添加新的內容時，你需要把它附加到DOM。

但是，您可以使用.on()並按照我上面在代碼的第一行中所寫的方式傳遞選擇器，從而可以在加載DOM後能夠引用/ attach-event到它的父元素。

來源

2013-08-12 07:48:31 Sergio

這不起作用。必須在父元素上調用on，以在添加新元素時維持綁定。 http://jsfiddle.net/3hcFp/5/ –

是的。在你的例子中，你假設'.ChekMarkWrap'也是動態插入的，我沒有。我們不知道OP的標記。無論如何，我將改爲'$（「body」），那麼它更安全。 – Sergio

確實如此。這是合理的假設，不是嗎？ :) –

您應該使用委託事件。您的代碼在document ready上運行。沒有什麼是與新的元素綁定的。

$("your-form-selector").on('click', ':checkbox', function(){ 
//your code here. 
});

來源

2013-08-12 07:50:44 RRikesh

您可以嘗試使用代表。事情是這樣的：

$(".ChekMarkWrap").delegate('click','input:checkbox',function() { 
    //your functionality 
});

相關信息：jQuery Documentation

來源

2013-08-12 07:52:01

'Delegate'從jQuery 1.7開始已棄用。 –

哼。應該使用on。 –

jQuery腳本從組一個複選框的選擇，同時增加了一個複選框動態

回答

相關問題