I have different number of TextBoxes with same Id.I am compelled to use same Id.I Do not have permission to use Class. I need to enable only the first TextBox and disable the rest.
Here is my code with 3 different TextBox :
JavaScript
x
6
1
<input type="Textbox" id="abc" data-templatefieldid="12" required="required" placeholder="Son">
2
3
<input type="Textbox" id="abc" data-templatefieldid="12" required="required" placeholder="Son">
4
5
<input type="Textbox" id="abc" data-templatefieldid="12" required="required" placeholder="Son">
6
I need output like this , I need to enable the first one and disable the rest :
JavaScript
1
6
1
<input type="Textbox" id="abc" data-templatefieldid="12" required="required" placeholder="Son">
2
3
<input type="Textbox" id="abc" data-templatefieldid="12" disabled="disabled" required="required" placeholder="Son">
4
5
<input type="Textbox" id="abc" data-templatefieldid="12" disabled="disabled" required="required" placeholder="Son">
6
Advertisement
Answer
ID
‘s must be unique in an HTML page.
That being said, if there is no other option for you because your company has a set of stupid norms, then you can use this. But using same id for different elements is not recommended.
jQuery solution.
JavaScript
1
3
1
$(function() {
2
$('[id=abc]').slice(1).prop("disabled", true);
3
});
JavaScript
1
4
1
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
2
<input type="Textbox" id="abc" data-templatefieldid="12" required="required" placeholder="Son">
3
<input type="Textbox" id="abc" data-templatefieldid="12" required="required" placeholder="Son">
4
<input type="Textbox" id="abc" data-templatefieldid="12" required="required" placeholder="Son">
JavaScript solution:
JavaScript
1
4
1
ele = document.querySelectorAll('[id="abc"]');
2
for (i = 0; i < ele.length; i++){
3
ele[i].disabled = true;
4
}
JavaScript
1
3
1
<input type="Textbox" id="abc" data-templatefieldid="12" required="required" placeholder="Son">
2
<input type="Textbox" id="abc" data-templatefieldid="12" required="required" placeholder="Son">
3
<input type="Textbox" id="abc" data-templatefieldid="12" required="required" placeholder="Son">