jquery - 循环遍历表单以查找禁用的控件

Question

我有一个带有输入、选择、单选按钮等的表单，我想在其中检查具有属性 [disabled=disabled] 的控件 ID

我试图一次将类应用于所有项目，并计划使用逗号分隔的所有禁用控件来获取输出。我的方法正确吗？

<form id="saveForm">
<input type='text' name='firstname' id='firstname' disabled='disabled'>
<input type='text' name='lastname' id='lastname' disabled='disabled'>
    etc.,
    </form>

$("input[disabled]").each(function(){
    var testdata = $(this).data('disabled');

});

我想要得到的输出:

“#名字，#姓氏，...”

Answer 1

要检索禁用元素的 id 的逗号分隔列表:

var idsOfDisabled = $('form [disabled]').map(function() {
  return this.id;
}).get().join(',');
console.log(idsOfDisabled); // firstname,lastname,title

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="saveForm">
  <input type='text' name='firstname' id='firstname' disabled='disabled' />
  <input type='text' name='lastname' id='lastname' disabled='disabled' />
  <select disabled="disabled" id="title">
    <option>Mr</option>
    <option>Mrs</option>
    <option>Ms</option>
    <option>Dr.</option>
  </select>
</form>

如果需要 # 字符，则:

var idsOfDisabled = $('form [disabled]').map(function() {
  return '#' + this.id;
}).get().join(',');
console.log(idsOfDisabled); // #firstname,#lastname,#title

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="saveForm">
  <input type='text' name='firstname' id='firstname' disabled='disabled' />
  <input type='text' name='lastname' id='lastname' disabled='disabled' />
  <select disabled="disabled" id="title">
    <option>Mr</option>
    <option>Mrs</option>
    <option>Ms</option>
    <option>Dr.</option>
  </select>
</form>

或者，更进一步，在纯 JavaScript 中仅使用 native DOM:

var idsOfDisabled = Array.prototype.map.call(document.querySelectorAll('form [disabled]'), function (disabledElem) {
  return '#' + disabledElem.id;
  }).join(',');

console.log(idsOfDisabled);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="saveForm">
  <input type='text' name='firstname' id='firstname' disabled='disabled' />
  <input type='text' name='lastname' id='lastname' disabled='disabled' />
  <select disabled="disabled" id="title">
    <option>Mr</option>
    <option>Mrs</option>
    <option>Ms</option>
    <option>Dr.</option>
  </select>
</form>

引用文献:

JavaScript:
• Array.prototype.join() .
• Array.prototype.map() .
• document.querySelectorAll() .
• Function.prototype.call() .
• jQuery:
  • get() .
  • map() .