0

我在 html.erb 中创建了一个复选框，如下所示：

<%= check_box_tag(:fenix_fee_charged) %>
<%= label_tag(:fenix_fee_charged, "FENIX_FEE_CHARGED") %>
<%= check_box_tag(:fenix_fee_no_charged) %>
<%= label_tag(:fenix_fee_no_charged, "FENIX_FEE_NO_CHARGED") %>

我创建了 javascript 来设置一个或另一个：

$('#fenix_fee_charged').click(function(){
    $('#fenix_fee_no_charged').removeAttr("checked");
});
$('#fenix_fee_no_charged').click(function(){
    $('#fenix_fee_charged').removeAttr("checked");
});

当我的检查选项增加时，我决定动态创建复选框：

<% Enums::FlightEnum::FENIX_FLIGHTS_NOTIFICATIONS.each do |notification, value| %>
  <%= check_box_tag notification, value %>
  <%= label_tag notification, notification.to_s.upcase, :class => "checkbox inline" %>
<% end %>

当我检查 javascript 函数时，这不起作用。我将不胜感激您能给我的任何帮助！

4

2 回答 2

2

使用.on()

由于元素是动态添加的，因此您无法将事件直接绑定到它们。因此您必须使用事件委托。

$(document).on('click', '#fenix_fee_charged', function(event) {
    $('#fenix_fee_no_charged').removeAttr("checked"); 
})
于 2013-10-21T14:31:30.420 回答
1

由于复选框是动态添加的，因此您需要使用事件委托来注册事件处理程序

// New way (jQuery 1.7+) - .on(events, selector, handler)
$(document).on('click', '#fenix_fee_charged', function(event) {
    $('#fenix_fee_no_charged').removeAttr("checked"); 
});

$(document).on('click', '#fenix_fee_no_charged', function(event) {
    $('#fenix_fee_charged').removeAttr("checked"); 
});

编辑

也尝试使用.prop()如下方法：

// Uncheck the checkbox
$('#fenix_fee_no_charged').prop("checked", false);

// Check the checkbox
$('#fenix_fee_no_charged').prop("checked", true);
于 2013-10-21T14:30:57.937 回答