javascript - 复选框点击第一次在 safari 中不起作用

Question

删除 按钮在页面加载时被禁用。表单上有多个复选框，当用户单击一个复选框时，delete 按钮会更改为启用。当用户取消选中复选框(未选中任何复选框)时，delete 按钮变为禁用状态。此外，所有选中的复选框值都将分配给以逗号分隔的输入字段。

以下代码在 chrome 中运行良好。但它在 Safari 中运行不正常。在 Safari 用户需要选中，再次取消选中他们必须选中(第三次)或者当他们选择第二个复选框时只有 delete 按钮变为启用并且所选值显示在输入字段中。我不知道这段代码有什么问题。

请在 Chrome 和 Safari 中查看此演示，您将获得它。

DEMO

$(document).on("click", ".imgtitleclick", function (e) {
    $checks = $('.imgtitleclickmodal');
    $checks.on('change', function() {
        var string = $checks.filter(':checked').map(function(i,v){
            return this.value;
        }).get().join(',');
        $('.hiddenimgnumdis').val(string);
        $('.hoverforport-img-del').prop('disabled', $checks.filter(':checked').length < 1);
    });
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<button class="btn-danger hoverforport-img-del floatright" disabled data-toggle="modal" data-target="#confirm-delete-portfolio">Delete</button>

<ul class="photo-grid lightgalleryselector">
    <div class="col-sm-4 col-xs-6 col-md-3 col-lg-3 shw mblpad hoverforport-img"> 
        <label class="width100 editbtnprofilea nopadd posabsol imgtitleclick color5" for="1">
        <input type="checkbox" value="1" class="imgtitleclickmodal" id="1">
        </label>
    </div>
    <div class="col-sm-4 col-xs-6 col-md-3 col-lg-3 shw mblpad hoverforport-img"> 
        <label class="width100 editbtnprofilea nopadd posabsol imgtitleclick color5" for="2">
        <input type="checkbox" value="2" class="imgtitleclickmodal" id="2">
        </label>
    </div>
</ul>


<input type="text" class="hiddenimgnumdis"/>

Answer 1

看起来您多次绑定(bind)更改事件(任何时候单击 .imgtitleclick)。它还将为所有 .imgtitleclickmodal 执行此操作，因为您尚未将其范围限定为当前复选框...这是一个对我有用的示例:

$(document).on("click", ".imgtitleclick", function (e) {
    $(this).find('.imgtitleclickmodal').trigger('change');
});

$(document).on("change", ".imgtitleclickmodal", function (e) {
  var $checks = $('.imgtitleclickmodal');
  var string = $checks.filter(':checked').map(function(i,v){
    return this.value;
  }).get().join(',');
  $('.hiddenimgnumdis').val(string);
  $('.hoverforport-img-del').prop('disabled', $checks.filter(':checked').length < 1);
});