在提交時禁用文本框並啓用重置

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

以下代碼將執行所需的行爲。

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

適用同一類要禁用或啓用

的onsubmit的所有元素：

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

onReset：

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

Answer 3

第一所有你需要給的您的提交（例如btnSubmit）並清除（例如btnClear）按鈕。

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