there is a table inside the modal. When the user clicks the button ‘Show Modal’ the modal will show. I’m trying to disable all the button except the button I click which become green when clicked. the green button named ‘Selected’ remains to enable and the rest of the red button named ‘Select’ is disabled. How can I do that? Can somebody help me with my problem? Here’s my jsfiddle –> https://jsfiddle.net/gLbwe8fy/1/
makeBeneficiaryButton : function(id, index) {
if(event.target.innerText == “Select”) {
event.target.innerText = “Selected”;
event.target.style.backgroundColor = “green”;
$(“#myModal11”).find(‘button#select’).prop(‘disabled’, ‘disabled’);
}
else {
event.target.innerText = “Select”;
event.target.style.backgroundColor = “#cc0000”;
}
}
Solution :
You are using plain js code which is not a problem but I’m going to give you a solution more vuejs oriented.
var vm = new Vue({
el: ‘#vue-app’,
data : {
dependents: [{
dependent_id : 1,
dependent_first_name : “John”,
dependent_middle_name : “Denver”,
dependent_last_name : “Doe”,
dependent_address : “USA”,
dependent_contact_no : “431-431-431”
},
{
dependent_id : 2,
dependent_first_name : “John”,
dependent_middle_name : “Denver”,
dependent_last_name : “Doe”,
dependent_address : “USA”,
dependent_contact_no : “431-431-431”
},
{
dependent_id : 3,
dependent_first_name : “John”,
dependent_middle_name : “Denver”,
dependent_last_name : “Doe”,
dependent_address : “USA”,
dependent_contact_no : “431-431-431”
}],
selected: null
},
methods : {
isDisabled (index) {
if (this.selected === null) return false;
return index != this.selected;
},
innerText (index) {
if (index === this.selected) return ‘selected’;
return ‘select’;
},
backgroundColor (index) {
if (index === this.selected) return “background-color: green”;
return “background-color: #cc0000”;
},
makeBeneficiaryButton : function(index) {
this.selected = this.selected === null ? this.selected = index : null;
}
}
});
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel=”stylesheet” href=”https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity=”sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T” crossorigin=”anonymous”>
<script src=”https://cdn.jsdelivr.net/npm/vue/dist/vue.js">
</script>
</head>
<body>
<div id=”vue-app”>
<button class=”btn bg-success btn-sm text-light” href=”#add” data-toggle=”modal” data-target=”#myModal11”>Show Modal</button>
<div class=”modal fade” id=”myModal11” class=”text-dark” tabindex=”1”> <!– start update modal –>
<div class=”modal-dialog modal-lg”>
<div class=”modal-content”>
<!– Modal Header –>
<div class=”modal-header”>
<h4 class=”modal-title”></h4>
</div>
<!– Modal body –>
<div class=”modal-body” id=”modal-medicine”>
<table class=”table table-responsive-sm table-hover table-bordered text-center mt-2”>
<thead class=”thead-info”>
<tr>
<th>ID</th>
<th>Full Name</th >
<th>Address</th>
<th>Contact No</th>
<th>Action</th>
</tr>
</thead>
<tbody v-if=”dependents.length > 0”>
<tr v-for=”(dependent, index) in dependents”>
<td>{dependent.dependent_id}</td>
<td>{dependent.dependent_first_name + “ “ + dependent.dependent_middle_name + “ “ + dependent.dependent_last_name}</td>
<td>{dependent.dependent_address}</td>
<td>{dependent.dependent_contact_no}</td>
<td>
<button :id=”index” @click=”makeBeneficiaryButton(index)” :style=”backgroundColor(index)” class=”btn btn-sm text-light” class=”btn bg-success btn-sm” :disabled=”isDisabled(index)”>{ innerText(index) }</button>
</td>
</tr>
</tbody>
<tbody v-else>
<tr>
<td colspan=”12” style=”font-size: 20px; text-align: center”><b>No dependent to show</b></td>
</tr>
</tbody>
</table>
</div>
<!– Modal footer –>
<div class=”modal-footer”>
<button type=”button” class=”btn btn-primary” data-dismiss=”modal”>
<i class=”far fa-save”> </i> Save
</button>
</div>
</div>
</div><!– update modal end –>
</div>
</div>
</body>
<script src=”https://code.jquery.com/jquery-3.3.1.js" integrity=”sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=” crossorigin=”anonymous”></script>
<script src=”https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity=”sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM” crossorigin=”anonymous”></script>