Kann nicht Attribute einer Schaltfläche auf Kontrollkästchen mit jquery

Question

austauschen Ich benutze jquery zu aktivieren/deaktivieren Schaltflächen beim Aktivieren/Deaktivieren eines Kontrollkästchens. Es gibt zwei Schaltflächen, von denen einer "Löschen" ist, der nur einen Datensatz löscht, und "Mehrere löschen", der alle ausgewählten Datensätze löscht.

Das Problem ist, wenn ich eine oder mehrere Kontrollkästchen aktiviert die Schaltfläche "Löschen" deaktiviert (nur Stil), aber immer noch funktionsfähig ist. Wenn ich die Kontrollkästchen deaktiviere, disballed die "Delete Multiple" Taste disbales (wieder nur Stil) und "Delete" Taste nicht zurück. Ich benutze Materialize.

Der Code ist wie folgt:

HTML-Code:

@foreach($engines as $engine) 
    <td> 
     <a class="waves-effect waves-light btn red modal-trigger searchDelete" href="#searchDelete" data-id="{{$engine->id}}" data-name="{{$engine->name}}">Delete</a> 
    </td> 
    <td> 
     <div class="row"> 
      <div class="switch"> 
       <label> 
        <input type="checkbox" name="ids" class="id-search" value="{{$engine->id}}"> 
        <span class="lever"></span> 
       </label> 
      </div> 
     </div> 
    </td> 
@endforeach 

JQuery-Code:

$('.id-search').on('change',function() { 
var ids = []; 
$('input:checkbox[name=ids]:checked').each(function() { 
    ids.push($(this).val()); 
}); 
var length = ids.length; 
if (length > 0) { 
    $('#deleteMultipleSearch').attr('class','btn waves-effect waves-light red modal-trigger'); 
    $('.searchDelete').attr('class', 'btn disabled'); 
    $('.searchDelete').removeAttr('class', 'modal-trigger searchDelete'); 
    console.log("Id clicked"); 
} 
else { 
    $('#deleteMultipleSearch').attr('class', 'btn disabled'); 
    $('.searchDelete').removeAttr('class', 'btn disabled'); 
    $('.searchDelete').attr('class', 'btn red'); 
} 
}); 

Answer 1

ich glaube, das Problem ist, dass Sie JQuery addClass und removeClass API verwenden sollten anstelle von attr und removeAttr für die Klassen zu manipulieren ... Versuchen Sie, diese Javascript-Code

$('.id-search').on('change',function() { 
    var ids = []; 
    $('input:checkbox[name=ids]:checked').each(function() { 
     ids.push($(this).val()); 
    }); 
    var length = ids.length; 
    if (length > 0) { 
     $('#deleteMultipleSearch').addClass('btn waves-effect waves-light red modal-trigger'); 
     $('.searchDelete').addClass('btn disabled'); 
     $('.searchDelete').removeClass('modal-trigger searchDelete'); 
     console.log("Id clicked"); 
    } 
    else { 
     $('#deleteMultipleSearch').addClass('btn disabled'); 
     $('.searchDelete').removeClass('btn disabled'); 
     $('.searchDelete').addClass('btn red'); 
    } 
}); 

Viel Glück