使用jQuery单击后退按钮后，输入字段不会被禁用

Question

打开表单后，单击“编辑”按钮后，所有输入字段和选择字段均处于禁用模式，这些字段将为可编辑格式。

一旦我单击“编辑”按钮，文本将更改为“后退”按钮，一旦我单击“后退”按钮，文本将为“编辑”按钮，但问题是，一旦我单击“后退”按钮，文本将更改为成功编辑，但字段也应从可编辑模式以禁用模式。

 $('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> 

Answer 1

只需检查您的按钮文字并启用，基于此禁用。

 $('input').attr('disabled', true); $('select').attr('disabled', true); $('.editbutton').on('click', function(e) { let txt = $(this).text(); e.preventDefault(); if (txt == "Edit") { $('input').attr('disabled', true); $('select').attr('disabled', true); } else { $('input').attr('disabled', false); $('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.0/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> 

Answer 2

试试这个方法：

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script> function myFunction() { var btn = document.getElementById("myButton"); if (btn.value == "Edit") { btn.value = "Back"; btn.innerHTML = "Back"; enableDisable(true) } else { btn.value = "Edit"; btn.innerHTML = "Edit"; enableDisable(false) } } function enableDisable(enable) { if (enable) { $('input').attr('disabled', false); } else { $('input').attr('disabled', true); } } </script> 

Answer 3

您实际上是使用editbutton类将三个click事件监听器附加到元素的。 html代码中的onclick足够强大。

因此，只需简单地首先停用输入字段并在回调函数myFunction（）中启用/禁用它即可。

像这样：

 $('input').attr('disabled', true); function myFunction() { var btn = document.getElementById("myButton"); if (btn.value == "Edit") { btn.value = "Back"; btn.innerHTML = "Back";$('input').attr('disabled', false); } else { btn.value = "Edit"; btn.innerHTML = "Edit";$('input').attr('disabled', true); } } 

 <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> 

Answer 4

您尚未正确设置。 这应该工作。 同时删除对myFunction（）的调用

<script>
// Disable all elements.
$('input').attr('disabled', true);

// Set up onClickListener 
$('.editbutton').on('click', (e) => {
    var btn = document.getElementById("myButton");
    if (btn.value == "Edit") {
        $('input').attr('disabled', false);
        btn.value = "Back";                                                                  
        btn.innerHTML = "Back";
    } else {
        $('input').attr('disabled', true);
        btn.value = "Edit";                                                                  
        btn.innerHTML = "Edit";
    }
});
</script>

Answer 5

您尝试使用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> 

Answer 6

设置此代码$('input').attr('disabled', false); 在函数的条件部分，如果按钮值为edit，则为false，否则为true。

 $('input').attr('disabled', true); $('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"; $('input').attr('disabled', false); } else { btn.value = "Edit"; btn.innerHTML = "Edit"; $('input').attr('disabled', true); } } 

 <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> 

Answer 7

const input = $('input');
const button = $('.editbutton');

input.attr('disabled', true);

button.on('click', (event) => {
    event.preventDefault();

    const target = event.currentTarget;

    let value = target.value;

    if(target.value === 'Edit') {
        input.attr('disabled', false);
        target.value = 'Back'

    } else {
        input.attr('disabled', true);
        target.value = 'Edit'
    }

    target.innerHTML = target.value;
});

并根据需要删除此onclick="myFunction()" 。

这是工作示例https://jsfiddle.net/muzikant/0w3xgrq7/8/

Answer 8

您在按钮元素中不需要onclick="myFunction" 。 您正在通过jquery添加事件监听器，因此可以使用它。

$('input').attr('disabled', true);  
$('.editbutton').on('click', function(e) {                                                              
    e.preventDefault();
    myFunction();
}

然后更改myFunction以更改单击时的禁用属性。

function myFunction() {
var btn = document.getElementById("myButton");
if (btn.value == "Edit") {
    $('input').attr('disabled', false);
    btn.value = "Back";                                                                  
    btn.innerHTML = "Back";
}
else {
    $('input').attr('disabled', true);
    btn.value = "Edit";                                                                  
    btn.innerHTML = "Edit";
}
}

Answer 9

您可能需要prop方法而不是attr方法。