如何使用Javascript禁用所有具有相同ID的重复Texbox
How can I disable all the duplicate Texbox having same Id using Javascript?
我有不同数量的具有相同 ID 的文本框。我被迫使用相同的 Id。我没有使用类的权限。我只需要启用第一个文本框并禁用其余的。
这是我使用 3 个不同文本框的代码:
<input type="Textbox" id="abc" data-templatefieldid="12" required="required" placeholder="Son">
<input type="Textbox" id="abc" data-templatefieldid="12" required="required" placeholder="Son">
<input type="Textbox" id="abc" data-templatefieldid="12" required="required" placeholder="Son">
我需要这样的输出,我需要启用第一个并禁用其余的:
<input type="Textbox" id="abc" data-templatefieldid="12" required="required" placeholder="Son">
<input type="Textbox" id="abc" data-templatefieldid="12" disabled="disabled" required="required" placeholder="Son">
<input type="Textbox" id="abc" data-templatefieldid="12" disabled="disabled" required="required" placeholder="Son">
ID
在 HTML 页面中必须是唯一的。
话虽如此,如果因为您的公司有一套愚蠢的规范而没有其他选择,那么您可以使用它。但不建议对不同的元素使用相同的 id。
j查询解决方案。
$(function() {
$('[id=abc]').slice(1).prop("disabled", true);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="Textbox" id="abc" data-templatefieldid="12" required="required" placeholder="Son">
<input type="Textbox" id="abc" data-templatefieldid="12" required="required" placeholder="Son">
<input type="Textbox" id="abc" data-templatefieldid="12" required="required" placeholder="Son">
JavaScript 解决方案:
ele = document.querySelectorAll('[id="abc"]');
for (i = 0; i < ele.length; i++){
ele[i].disabled = true;
}
<input type="Textbox" id="abc" data-templatefieldid="12" required="required" placeholder="Son">
<input type="Textbox" id="abc" data-templatefieldid="12" required="required" placeholder="Son">
<input type="Textbox" id="abc" data-templatefieldid="12" required="required" placeholder="Son">
使用此脚本
var inputList = document.querySelectorAll('#abc');
console.log(inputList);
for(var index = 1; index < inputList.length; index++) {
inputList[index].setAttribute('disabled', 'disabled');
}
Id 用于唯一标识。理想情况下,您不应使用重复的 id。在不允许添加类的情况下,可以将自定义属性添加为选择器。
您的 HTML 可以是
<input type="Textbox" id="abc1" my-id="123" data-templatefieldid="12" required="required" placeholder="Son">
<input type="Textbox" id="abc2" my-id="123" data-templatefieldid="12" required="required" placeholder="Son">
<input type="Textbox" id="abc3" my-id="123" data-templatefieldid="12" required="required" placeholder="Son">
你的jquery可以是
<script>
$(document).ready(function() {
$( "input[my-id='123']" ).not(':first').attr('disabled','disabled');
});
</script>
如果您不允许添加自定义属性,下面的jQuery将适用于您提供的HTML
$( "#abc" ).not(':first').attr('disabled','disabled');
使用@satish-sam 解决方案,但使用name
属性而不是 id:
目录
<input type="Textbox" name="abc" data-templatefieldid="12" required="required" placeholder="Son">
<input type="Textbox" name="abc" data-templatefieldid="12" required="required" placeholder="Son">
<input type="Textbox" name="abc" data-templatefieldid="12" required="required" placeholder="Son">
爪哇语
var txt=$('[name="abc"]');
$.each(txt,function (index) {
if(index>0)
{
$(txt[index]).attr('disabled','disabled');
}
});
你可以
试试这个,这可能会有所帮助
function clearAll()
{
var ele= document.getElementsById("myId");
for(var i=0;i<ele.length;i++){
if(i>0)
ele[i].disabled = true;
}
}
根据W3C id属性在HTML页面中必须是唯一的。在页面中有多个 id(重复)不是标准的。
但是要使用JQuery查找重复的id,您可以使用以下代码:
//See console for duplicate ids
$('[id]').each(function(){
var id = $('[id="'+this.id+'"]');
if(id.length>1 && id[0]==this) {
console.log('ID: '+ this.id + ' id duplicate');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<a id="a">A1</a>
<a id="b">B</a>
<a id="c">C</a>
<a id="a">A2</a>
您可以执行自己喜欢的操作,而不是在控制台中返回的内容,例如禁用文本框
试试这个
var txt = $('#abc');
$.each(txt, function (index) {
if(index > 0) {
$(txt[index]).attr('disabled', 'disabled');
}
});
相关文章:
- 如何将HTML id分配给元素,以及如何将JavaScript应用于元素
- difference between '$(<%= DDL.ID %>) & $('
- 使用Javascript获取所选选项ID
- 根据id将json数组组合为一个json数组
- 是否有一个JS/jQuery函数可以获取某个类的每个元素的ID
- 对id以某个字符串开头的元素进行计数
- 如果元素's的ID以数字开头
- 通过id和class属性获取元素
- 根据选项卡内部的文本链接中的哈希ID动态选择jqueryUI选项卡
- 使用当前日期生成随机id
- Javascript-ID冲突的几率
- Href:当前DIV中的目标ID
- 无法获取属性'Id'使用Knockout.js的未定义或空引用API
- Javascript复选框函数:;缺少:在属性id之后"
- Twitter引导程序Typeahead-Id&标签
- 如何与特定ID交谈
- chart.series[id].remove()无法刷新高位图表/高位股票中其他系列的图例属性
- 如何在速度模板中获取LiferayPortlet实例id
- 谷歌地图可以't添加正确的标记ID
- 如何使用Javascript禁用所有具有相同ID的重复Texbox