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

时间：2019-06-18 12:06:32

标签： javascript jquery html

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

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

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

9 个答案:

答案 0 :(得分：2)

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

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

答案 1 :(得分：1)

尝试此方法：

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

答案 2 :(得分：1)

您实际上是使用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>

答案 3 :(得分：1)

您没有正确设置。这应该工作。同时删除对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>

答案 4 :(得分：1)

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

答案 5 :(得分：1)

在函数的条件部分设置此代码$('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>

答案 6 :(得分：1)

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/

答案 7 :(得分：1)

按钮元素中不需要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";
}
}

答案 8 :(得分：0)

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

相关问题
最新问题