[英]How can I make the form editable when I click the edit button?
我制作了一个基本的个人资料页面，用户可以编辑他们的个人资料信息。 我在页面末尾放了一个按钮。 起初，表单应该是未编辑的，但是当我单击按钮时，表单变成了可编辑的。 我尝试在我的标签中使用：disable 但没有用。 我该如何解决这个问题？
<template>
<div>
<div class="container">
<div class="row gutters">
<div class="col-xl-3 col-lg-3 col-md-12 col-sm-12 col-12">
<div class="card h-100">
<div class="card-body">
<div class="account-settings">
<div class="user-profile">
<div class="user-avatar">
<img src="../../assets/people/a2.jpg" alt="Avatar" class="profile_avatar">
</div>
<h5 class="full_name">abc</h5>
<h6 class="email">abc@email.org</h6>
</div>
</div>
</div>
</div>
</div>
<div class="col-xl-9 col-lg-9 col-md-12 col-sm-12 col-12">
<div class="card h-100">
<div class="card-body">
<div class="row gutters">
<div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">
<h6 class="mb-2 text-primary">Profil Detayı</h6>
</div>
<div class="col-xl-6 col-lg-6 col-md-6 col-sm-6 col-12">
<div class="form-group">
<label for="first_name">İsim</label>
<input type="text" class="form-control" id="first_name" placeholder="İsim" disabled>
</div>
</div>
<div class="col-xl-6 col-lg-6 col-md-6 col-sm-6 col-12">
<div class="form-group">
<label for="last_name">Soyisim</label>
<input type="text" class="form-control" id="last_name" placeholder="Soyisim" disabled>
</div>
</div>
<div class="col-xl-6 col-lg-6 col-md-6 col-sm-6 col-12">
<div class="form-group">
<label for="username">Username</label>
<input type="text" class="form-control" id="username" placeholder="Username" disabled>
</div>
</div>
<div class="col-xl-6 col-lg-6 col-md-6 col-sm-6 col-12">
<div class="form-group">
<label for="email">Email</label>
<input type="email" class="form-control" id="email" placeholder="Email" disabled>
</div>
</div>
<div class="col-xl-6 col-lg-6 col-md-6 col-sm-6 col-12">
<div class="form-group">
<label for="gsm_number">Telefon</label>
<input type="text" class="form-control" id="gsm_number" placeholder="Telefon" disabled>
</div>
</div>
<div class="col-xl-6 col-lg-6 col-md-6 col-sm-6 col-12">
<label for="gsm_number">Şifre</label>
<b-input-group>
<b-form-input type="password" class="form-control" id="password" placeholder="Şifre" disabled></b-form-input>
<template #append>
<b-button v-b-modal.modal-prevent-closing variant="default" @click="passwordModal"><i class="fa fa-pencil-square-o"></i> </b-button>
<b-modal
id="modal-prevent-closing"
ref="modal"
title="Şifre Değiştir"
>
<form ref="form" @submit.stop.prevent="handleSubmit">
<b-form-group
label="Mevcut Şifre"
label-for="current_pass"
invalid-feedback="Mevcut şifrenizi giriniz"
>
<b-form-input type="password" class="form-control" id="password"
></b-form-input>
</b-form-group>
<b-form-group
label="Yeni Şifre"
label-for="new_pass"
invalid-feedback="Yeni şifrenizi giriniz"
>
<b-form-input type="password" class="form-control" id="new_pass"
></b-form-input>
</b-form-group>
<b-form-group
label="Yeni Şifre Doğrulama"
label-for="new_pass_con"
invalid-feedback="Yeni şifrenizi tekrar giriniz"
>
<b-form-input type="password" class="form-control" id="new_pass_con"
></b-form-input>
</b-form-group>
</form>
</b-modal>
</template>
</b-input-group>
</div>
</div>
<div class="text-left">
<b-button variant="default" @click="editProfile"><i class="fa fa-pencil"></i> </b-button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
这是我的 html 代码。 我禁用所有表单并希望在单击按钮时启用
Jquery解决方法：
禁用输入字段
$( "#your_form_input_id" ).prop( "disabled", true );
启用输入字段
$( "#your_form_input_id" ).prop( "disabled", false );
你应该这样做。
<input type="text" id="no_of_staff" readonly />
在你点击按钮之后
$("#no_of_staff").attr("readonly", false);
document.getElementById('no_of_staff').removeAttribute('readonly');//purejs
您应该添加一个数据变量isEditable并将disabled属性绑定到它的值。 单击按钮使isEditable = true 。 这将使您的表单可编辑。
<template>
<div>
<div class="container">
<div class="row gutters">
<div class="col-xl-3 col-lg-3 col-md-12 col-sm-12 col-12">
<div class="card h-100">
<div class="card-body">
<div class="account-settings">
<div class="user-profile">
<div class="user-avatar">
<img src="../../assets/people/a2.jpg" alt="Avatar" class="profile_avatar">
</div>
<h5 class="full_name">abc</h5>
<h6 class="email">abc@email.org</h6>
</div>
</div>
</div>
</div>
</div>
<div class="col-xl-9 col-lg-9 col-md-12 col-sm-12 col-12">
<div class="card h-100">
<div class="card-body">
<div class="row gutters">
<div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">
<h6 class="mb-2 text-primary">Profil Detayı</h6>
</div>
<div class="col-xl-6 col-lg-6 col-md-6 col-sm-6 col-12">
<div class="form-group">
<label for="first_name">İsim</label>
<input type="text" class="form-control" id="first_name" placeholder="İsim" :disabled="!isEditable">
</div>
</div>
<div class="col-xl-6 col-lg-6 col-md-6 col-sm-6 col-12">
<div class="form-group">
<label for="last_name">Soyisim</label>
<input type="text" class="form-control" id="last_name" placeholder="Soyisim" :disabled="!isEditable">
</div>
</div>
<div class="col-xl-6 col-lg-6 col-md-6 col-sm-6 col-12">
<div class="form-group">
<label for="username">Username</label>
<input type="text" class="form-control" id="username" placeholder="Username" :disabled="!isEditable">
</div>
</div>
<div class="col-xl-6 col-lg-6 col-md-6 col-sm-6 col-12">
<div class="form-group">
<label for="email">Email</label>
<input type="email" class="form-control" id="email" placeholder="Email" :disabled="!isEditable">
</div>
</div>
<div class="col-xl-6 col-lg-6 col-md-6 col-sm-6 col-12">
<div class="form-group">
<label for="gsm_number">Telefon</label>
<input type="text" class="form-control" id="gsm_number" placeholder="Telefon" :disabled="!isEditable">
</div>
</div>
<div class="col-xl-6 col-lg-6 col-md-6 col-sm-6 col-12">
<label for="gsm_number">Şifre</label>
<b-input-group>
<b-form-input type="password" class="form-control" id="password" placeholder="Şifre" :disabled="!isEditable"></b-form-input>
<template #append>
<b-button v-b-modal.modal-prevent-closing variant="default" @click="passwordModal"><i class="fa fa-pencil-square-o"></i> </b-button>
<b-modal
id="modal-prevent-closing"
ref="modal"
title="Şifre Değiştir"
>
<form ref="form" @submit.stop.prevent="handleSubmit">
<b-form-group
label="Mevcut Şifre"
label-for="current_pass"
invalid-feedback="Mevcut şifrenizi giriniz"
>
<b-form-input type="password" class="form-control" id="password"
></b-form-input>
</b-form-group>
<b-form-group
label="Yeni Şifre"
label-for="new_pass"
invalid-feedback="Yeni şifrenizi giriniz"
>
<b-form-input type="password" class="form-control" id="new_pass"
></b-form-input>
</b-form-group>
<b-form-group
label="Yeni Şifre Doğrulama"
label-for="new_pass_con"
invalid-feedback="Yeni şifrenizi tekrar giriniz"
>
<b-form-input type="password" class="form-control" id="new_pass_con"
></b-form-input>
</b-form-group>
</form>
</b-modal>
</template>
</b-input-group>
</div>
</div>
<div class="text-left">
<b-button variant="default" @click="editProfile"><i class="fa fa-pencil"></i> </b-button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
在您的组件定义中
data(){
return {
// Other state
isEditable: false
}
},
methods: {
editProfile() {
this.isEditable = true
}
}
如果您希望按钮充当开关，则
editProfile() {
this.isEditable = !this.isEditable
}
如何使我的 td 中的所有输入对于单击编辑按钮的行都是可编辑的
[英]How can I make all the inputs inside my td's editable for the row the edit button was clicked on
在点击表格中的“编辑”按钮后，如何使表格中的一个单元格“内容可编辑”
[英]How can I make one cell in a table “content editable” after hitting and edit button in the table
我怎样才能使它需要用户点击一个按钮，要验证的形式？
[英]How can I make it necessary for the user to click a button for the form to be validated?
单击“编辑”按钮时，如何用数据库值填充HTML表单？
[英]How do I populate HTML form with database values when I click edit button?
当我单击对应的复选框时，如何使不可编辑的文本框变为可编辑的
[英]How to make non editable text box to editable when i click on check box corresponding to it
使用javascript单击“编辑”按钮时，如何使行可编辑？
[英]How make the row editable when edit button is clicked using javascript?
当我单击制作排序（ab）数组然后再次单击排序（ba）时，如何制作单击按钮
[英]How can i make a click button when do i click make sort(a-b) array and then click again to sort(b-a)
如何使div元素可编辑（当我点击它时就像textarea一样）？
[英]How do I make a div element editable (like a textarea when I click it)?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.