如何使用 jQuery 从 HTML 禁用属性中禁用文本框

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/24545949/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-27 02:35:27  来源:igfitidea点击:

How to disable textbox from HTML disabled attribute using jQuery

jqueryhtmlspringvalidationcontrols

提问by UdayKiran Pulipati

How to write jQuery code for disable textbox of HTML attributes. By using jQuery I disabled the textbox based on userId, if userId == ''I want to enable the textbox if userId != ''I want to disabled the textbox.

如何编写 jQuery 代码来禁用 HTML 属性的文本框。通过使用 jQuery,我根据 userId 禁用了文本框,如果userId == ''我想禁用文本框,我想启用文本userId != ''框。

<input type="text" value="${userJson.firstName}" class="txtcontrolwidth" name="firstName" maxlength="45" id="firstName"
       disabled="if(${userJson.userId} == '') {$('#firstName').attr('disabled', false)} else {$('#firstName').attr('disabled', true)}" />

Every time it is in disabled mode it is not enabled.

每次它处于禁用模式时,它都不会启用。

By calling outside function for disabling textbox it is easy.

通过调用外部函数来禁用文本框很容易。

<script type="text/javascript" src="<%=request.getContextPath() %>/js/jquery-1.11.1.js"></script>
<script type="text/javascript">
if(${userJson.userId} == "") {
    $('#firstName').attr('disabled', false);
} else {
    $('#firstName').attr('disabled', true);
}
</script>

But I want to disabled textbox in disabled attribute only.

但我只想禁用禁用属性中的文本框。

回答by John

First of all your html is bad! you can't write script inside the html without <script></script>tags.

首先你的html是坏的!你不能在没有<script></script>标签的 html 中编写脚本。

HTML :

HTML :

<input type="text" value="" class="txtcontrolwidth" name="firstName" maxlength="45" id="firstName" />   

SCRIPT :

脚本 :

$('#firstName').focusout(function(){

if( $(this).val() != "" ) {
    $(this).prop('disabled',true);
 } else {
    $(this).prop('disabled',false);
 }
});

回答by feijones

The HTML disabledattribute you are using in the <input>tag is a boolean attribute, but it is kind of tricky.

disabled您在<input>标签中使用的 HTML属性是一个布尔属性,但它有点棘手。

Check this out:

看一下这个:

<!-- These will be disabled -->
<input type="text" disabled>    
<input type="text" disabled="true">
<input type="text" disabled="false">
<input type="text" disabled="myFunction()"> <!-- function will not be executed -->

<!-- And this will be enabled -->
<input type="text">

If you want your <input>to be enabled, do not include the disabledattribute in the tag.

如果您希望<input>启用您,请不要disabled在标签中包含该属性。

Try replacing your code with this one:

尝试用以下代码替换您的代码:

<input type="text" value="${userJson.firstName}" class="txtcontrolwidth" name="firstName" maxlength="45" id="firstName" ${ userJson.userId == '' ? 'disabled' : '' } />

The code above will write disabledattribute to the tag only when userJson.userId == ''.

上面disabled的代码只会在userJson.userId == ''.

回答by Srinu

HTML

HTML

<input type="text" value="${userJson.firstName}" class="txtcontrolwidth" name="firstName" maxlength="45" id="firstName"
   disabled="if(${userJson.userId} == '') {$('#firstName').attr('disabled', false)} else {$('#firstName').attr('disabled', true)}" />

In the above code disabled attribute is present, so the textbox always in disabled mode, if javascript is returns true or false the disabled property value wont change.

在上面的代码中存在 disabled 属性,因此文本框始终处于禁用模式,如果 javascript 返回 true 或 false,则禁用属性值不会改变。

use the following

使用以下

<input type="text" value="${userJson.firstName}" class="txtcontrolwidth" name="firstName" maxlength="45" id="firstName" ${userJson.userId == ''?'': 'disabled'}>

if want to use a javascript function use the following:

如果要使用 javascript 函数,请使用以下内容:

<script type="text/javascript">
    // you have to use double quotes around the value, because the ${userJson.userId} is evaluated then prints the value to the browser html, it cause javascript error
    if("${userJson.userId}" == "") {
        $('#firstName').prop('disabled', false);
    } else {
        $('#firstName').prop(disabled', true);
}
</script>