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

时间:2013-03-21 08:51:34

标签: jquery jquery-ui validation

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

4 个答案:

答案 0 :(得分:0)

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

onSubmit:

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

onReset:

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

答案 1 :(得分:0)

首先,你需要为你的提交(例如btnSubmit)和clear(例如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');
    });
});

答案 2 :(得分:0)

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

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

答案 3 :(得分:0)

要禁用它,只需要向该元素添加禁用属性(输入,文本区域,选择,按钮)。例如:

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