Question

81

Checkbox click is not working in safari for the first time

rated 0 times [ 85] [ 4] / answers: 1 / hits: 5468 / 6 Years ago, sun, april 15, 2018, 12:00:00

The delete button is disabled when the page load. There are multiple checkboxes on the form and when a user clicks a checkbox then the delete button change to enable. When a user unchecks the checkbox (didn't select any checkbox) then the delete button change to disabled. Also, all the selected checkbox value will be assigned to an input field separated by a comma.

Below code is working fine in chrome. But it's not working fine in Safari. In Safari user need to check, uncheck again they have to check (third time) or when they select the second checkbox then only the delete button change to enabled and the selected value is displaying in the input field. I don't know whats wrong with this code.

Please check this demo in Chrome and Safari you will get it.

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/>

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

jackie

Add To Favorites

Follow

Total Points: 442

Total Questions: 107

Total Answers: 94

Location: Honduras

Member since Sun, Dec 26, 2021

2 Years ago

answered 6 Years ago makiyac · Accepted Answer

Looks like you're binding the change event multiple times (anytime .imgtitleclick is clicked). It's also going to do it for all .imgtitleclickmodal because you haven't scoped it to the current checkbox... here's an example that is working for me:

$(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);

});