Question

页面加载时，delete按钮被禁用。表单上有多个复选框，当用户单击复选框时，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

您似乎多次绑定更改事件（随时点击.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);
});

第一次点击复选框无法在Safari中使用

1 个答案: