Question

我有不同数量的具有相同Id的TextBox。我被迫使用相同的Id.I没有使用Class的权限。我只需要启用第一个TextBox并禁用其余的。

这是我的代码，包含3个不同的TextBox：

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

Answer 1

ID在HTML网页中必须是唯一的。

话虽如此，如果您没有其他选择，因为您的公司有一套愚蠢的规范，那么您可以使用它。但是对于不同元素使用相同的ID是 不推荐 。

jQuery解决方案。

＆＃13;

$(function() {
  $('[id=abc]').slice(1).prop("disabled", true);
});

＆＃13;

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

＆＃13;

JavaScript解决方案：

＆＃13;

ele = document.querySelectorAll('[id="abc"]');
for (i = 1; i < ele.length; i++){
  ele[i].disabled = true;
}

＆＃13;

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

＆＃13;

Answer 2

使用此脚本

var inputList = document.querySelectorAll('#abc');
console.log(inputList);
for(var index = 1; index < inputList.length; index++) {
    inputList[index].setAttribute('disabled', 'disabled');
}

Answer 3

试试这个

var txt = $('#abc');
$.each(txt, function (index) {
    if(index > 0) {
        $(txt[index]).attr('disabled', 'disabled');
    }
});

Answer 4

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

Answer 5

使用@satish-sam解决方案，但使用name属性而不是id's：

HTML

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

的Javascript

var txt=$('[name="abc"]');
$.each(txt,function (index) {
  if(index>0)
  {
    $(txt[index]).attr('disabled','disabled');
  }
});

Answer 6

你可以尝试这个，这可能会有所帮助

function clearAll()
{
   var ele= document.getElementsById("myId");
     for(var i=0;i<ele.length;i++){
      if(i>0)
        ele[i].disabled = true;
      }
}

Answer 7

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

而不是在控制台中返回，您可以执行您喜欢的操作，例如禁用文本框

如何使用Javascript禁用所有具有相同Id的重复Texbox？

7 个答案: