jquery - 在提交时禁用文本框并在重置时启用

Question

使用 Jquery，一旦提交文本框并单击清除按钮，需要禁用文本框，应清除并启用文本框中的值。

代码：

<table width="75%">
  <tr>
    <td>
      <h:outputLabel   value="Actual Card Number">
      </h:outputLabel>
     </td>
     <td>
       <h:outputLabel value="Disguised" style="font: 13px/15px Arial,sans-serif!important;">
       </h:outputLabel>

     </td>
  </tr>
  <tr>
    <td>
      <h:inputText id="Actualcard" styleClass="input-text-bx">

      </h:inputText>
    </td>
    <td>
      <h:inputText id="Disguisedcard" styleClass="input-text-bx">

      </h:inputText>
    </td>
  </tr>
  <tr>
  </tr>
  <tr class="field">
    <td>
      <h:commandButton styleClass="input-sub-btn" value="Submit">
      </h:commandButton>
    </td>
    <td align="center">
      <h:commandButton styleClass="input-sub-btn" value="Clear">
      </h:commandButton>
    </td>
  </tr>
  <tr>
  </tr>
</table>

Answer 1

将相同的类应用于要禁用或启用的所有元素

提交：

  $('.className').attr('disabled','true');

重置：

    $('.className').attr('disabled','false');

Answer 2

首先，您需要为提交（例如 btnSubmit）和清除（例如 btnClear）按钮提供 id。

$(document).ready(function(){
    $('#btnSubmit').click(function(){
        $('input[type="text"]').attr('disabled', 'true');   //disables all textbox
    });

    $('#btnClear').click(function(){
        $('input[type="text"]').val('').removeAttr('disabled');
    });
});

Answer 3

以下代码将执行所需的行为。

<script>
$(document).ready(function(){

$("[value='Submit']").click(function(event){
//code for Submit
$(".input-text-bx").attr("disabled","disabled"); //disable all text fields.
event.preventDefault();
});


$("[value='Clear']").click(function(event){
//code for Clear
$(".input-text-bx").removeAttr("disabled"); //enable all text fields.
$(".input-text-bx").attr("value",""); //clear all text fields.
event.preventDefault();
});

});
</script>

Answer 4

禁用它所需要做的就是向该元素（输入、文本区域、选择、按钮）添加禁用属性。例如：

<form action="url" method="post">
  <input type="text" class="input-field" value=".input-field">
  <input type="button" class="button-field" value=".input-field">
  <input type="radio" class="radio-button" value=".input-radio">
  <select class="select-box">
    <option value="1">One</option>
  <select class="select-box">
</form>

用于禁用表单元素并重新启用它们的 jQuery 代码：

// jQuery code to disable
$('.input-field').prop('disabled', true);
$('.button-field').prop('disabled', true);
$('.radio-button').prop('disabled', true);
$('.select-box').prop('disabled', true);

// To enable an element you need to either
// remove the disabled attribute or set it to "false"
// For jQuery versions earlier than 1.6, replace .prop() with .attr()
$('.input-field').prop('disabled', false);
$('.button-field').removeAttr('disabled');
$('.radio-button').prop('disabled', null);
$('.select-box').prop('disabled', false);