在提交时禁用文本框并在重置时启用答案

【问题标题】：Disabling text boxes on submit and enabling on reset在提交时禁用文本框并在重置时启用
【发布时间】：2013-03-21 08:51:34
【问题描述】：

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

【问题讨论】：

'文本框已提交'或'表单已提交'？ “提交”和“清除”按钮在哪里？

标签： jquery jquery-ui validation

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

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

提交：

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

onReset：

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

【讨论】：

【解决方案3】：

首先，您需要为提交（例如 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');
    });
});

【讨论】：

我不确定“文本框已提交”

【解决方案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);

【讨论】：