Как я могу отключить кнопки, кроме кнопки, которую я нажимаю? - PullRequest
Новая
       9

Как я могу отключить кнопки, кроме кнопки, которую я нажимаю?

0 голосов
/ 08 июня 2019

У меня есть стол внутри модал.Когда пользователь нажимает кнопку «Показать модал», будет отображаться модал.Я пытаюсь отключить все кнопки, кроме кнопки, которую я нажимаю, которые становятся зелеными при нажатии.Я хочу, чтобы зеленая кнопка с именем «Выбрано» оставалась включенной, а остальная красная кнопка с именем «Выбрать» отключена.Как я могу это сделать?Может ли кто-нибудь помочь мне с моей проблемой?Вот мой 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";
            }

        }

1 Ответ

0 голосов
/ 08 июня 2019

Вы используете простой js-код, который не является проблемой, но я собираюсь дать вам решение, более vuejs ориентированное. 

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">&nbsp;</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>
...