一旦打开表单,所有输入字段和选择字段在单击编辑按钮后都处于禁用模式,这些字段将处于可编辑格式。
一旦我点击编辑按钮,文本就会变成后退按钮,一旦我点击后退按钮,文本就会变成编辑按钮,但问题是一旦我点击后退按钮,文本就会变成编辑成功,但字段也会应该从可编辑模式更改为禁用模式。
$('input').attr('disabled', true);
$('.editbutton').on('click', function(e) { e.preventDefault();
$('input').attr('disabled', false);
})
$('select').attr('disabled', true);
$('.editbutton').on('click', function(e) { e.preventDefault();
$('select').attr('disabled', false);
})
function myFunction() {
var btn = document.getElementById("myButton");
if (btn.value == "Edit") {
btn.value = "Back";
btn.innerHTML = "Back";
}
else {
btn.value = "Edit";
btn.innerHTML = "Edit";
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="myButton" onclick="myFunction()" class="btn btn-default editbutton" value="Edit">Edit</button>
<div class="md-form col-md-5">
<label data-error="wrong" data-success="right" for="first-name">First Name</label>
<input type="text" id="first-name" value="Doctor" class="form-control validate">
</div>
<div class="md-form col-md-5">
<label data-error="wrong" data-success="right" for="last-name">Last Name</label>
<input type="text" id="last-name" value="p" class="form-control validate">
</div>
<div class="md-form col-md-5">
<label data-error="wrong" data-success="right" for="email">Email</label>
<input type="email" id="email" value="doctor@gmail.com" class="form-control validate">
</div>
<div class="md-form col-md-5">
<label data-error="wrong" data-success="right" for="phone-number">Phone Number</label>
<input type="text" id="phone-number" value="1234567890" class="form-control validate">
</div>
<div class="md-form col-md-2">
<label data-error="wrong" data-success="right" for="isverified">Is Verified?</label><br/>
<input type="checkbox" name="verified" value="verified" checked> </div>
<button class="btn btn-default">Update Profile</button>
最佳答案
您尝试使用 removeAttr()
删除您想要的属性:
$('input').attr('disabled', true);
$('select').attr('disabled', true);
$('#myButton').on('click', function(e) {
e.preventDefault();
if($('input').attr('disabled')){
$('input').removeAttr('disabled');
$('select').removeAttr('disabled');
this.textContent = "Back";
}
else{
$('input').attr('disabled', true);
$('select').attr('disabled', true);
this.textContent = "Edit";
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="myButton" class="btn btn-default editbutton" value="Edit">Edit</button>
<div class="md-form col-md-5">
<label data-error="wrong" data-success="right" for="first-name">First Name</label>
<input type="text" id="first-name" value="Doctor" class="form-control validate">
</div>
<div class="md-form col-md-5">
<label data-error="wrong" data-success="right" for="last-name">Last Name</label>
<input type="text" id="last-name" value="p" class="form-control validate">
</div>
<div class="md-form col-md-5">
<label data-error="wrong" data-success="right" for="email">Email</label>
<input type="email" id="email" value="doctor@gmail.com" class="form-control validate">
</div>
<div class="md-form col-md-5">
<label data-error="wrong" data-success="right" for="phone-number">Phone Number</label>
<input type="text" id="phone-number" value="1234567890" class="form-control validate">
</div>
<div class="md-form col-md-2">
<label data-error="wrong" data-success="right" for="isverified">Is Verified?</label><br/>
<input type="checkbox" name="verified" value="verified" checked> </div>
<button class="btn btn-default">Update Profile</button>
关于javascript - 使用 jquery 单击后退按钮后,输入字段不会被禁用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56648769/