Article: Enable or Disable Button based on condition using JavaScript
I have this code:
@foreach($booksData as $book)
<td id="total">{{$book->number_books}}<br>
<h6 class="text-success" data-id="{{ $book->id }}">Available: {{ ($book->number_books) - ($book->number_borrowedbooks) }} </h6>
</td>
<td style="width: 25px;">
<input data-id="{{$book->id}}" data-forwhat="books"
class="toggle-class"type="checkbox"
data-onstyle="success"
data-offstyle="danger"data-toggle="toggle"data-on="Active"data-off="Inactive"
{{$book->status ? 'checked' : ''}}>
</td>
@end foreach
<scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<scriptsrc="https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js"></script>
<script>
jQuery(document).ready(function ($) {
console.log('jQuery is loaded!');
$('.toggle-class').change(function(){
var status =$(this).prop('checked') == true ? 1 : 0;
var forwhat = $(this).data('forwhat') || 'books';
var id = $(this).data('id');
var token = $('meta[name="csrf-token"]').attr('content');
$.ajax({
type: "GET",
dataType: "json",
url: '/changeStatus',
data: {
'status': status,
'id': id,
'forwhat': forwhat,
'_token': token
},
success: function(data){
console.log(data.success)
},
error: function (xhr, status, error) {
console.error(xhr.responseText);
}
})
});
});
</script>
this code is working perfectly fine.
now my senior has asked me if available = 0 then status will automatically be inactive and when it is 1 it will automatically be active rest time
how it is working will be perfectly ok
