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

Question

Once the form is opened all the input fields and select fields are in disabled mode after clicking on edit button the fields will be in editable format.

Once i click on edit button the text is changing to Back button and once i click on back button the text will be edit button but the problem is once i click on back button the text is changing to edit successfully but the fields also should change from editable mode to disable mode.

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

Just check your button text and enable , disable based on this.

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

Try this method:

 <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

You're essentially attaching three click event listeners to element's using the editbutton class. The onclick inside the html code is enough tough.

So simply deactivate your input field initially and enable/disable it inside the callback function myFunction().

Like this:

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

You have not set it up properly. This should work. Also remove call to 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

You try using removeAttr() to remove the attribute you want:

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

Set this code $('input').attr('disabled', false); on the conditional part of your function, false if button value is edit else 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;
});

And remove this onclick="myFunction()" as you don't need it.

Here is working example https://jsfiddle.net/muzikant/0w3xgrq7/8/

Answer 8

You don't need the onclick="myFunction" in the button element. You are adding an event listener via jquery, so you can just use that.

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

Then change myFunction to change the disable attribute as you click.

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方法。