Question

我在模态中有一张桌子。当用户单击“显示模态”按钮时，模态将显示。我正在尝试禁用除我单击的按钮以外的所有其他按钮，这些按钮在单击后会变为绿色。我希望保留名为“ Selected”的绿色按钮，并禁用名为“ Select”的红色按钮的其余部分。我怎样才能做到这一点？有人可以帮我解决我的问题吗？这是我的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";
            }

        }

Answer 1

您正在使用普通的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>

除单击的按钮外，如何禁用其他按钮？

1 个答案: