禁用非选定 div 元素内的输入字段答案

【问题标题】：Disable input fields inside non selected div elements禁用非选定 div 元素内的输入字段
【发布时间】：2021-07-10 09:05:09
【问题描述】：

我在 div 中有输入字段。我想禁用所有 div id 不等于某个变量的输入字段。例如，我有一个 id == 12，我想禁用 id ！= 12 的 div 元素内的所有输入字段。如何在 jQuery 中做到这一点。提前致谢

【问题讨论】：

应该类似于$(input_class[id!="12"]).disable()

标签： javascript html jquery

【解决方案1】：

要禁用 div 中的所有输入元素，请使用以下代码：

$(‘#message :input’).attr(‘disabled’, true);

要禁用 div 中的所有选择元素，请使用以下代码：

$(‘#message :select’).attr(‘disabled’, true);

要禁用 div 中的所有提交按钮，请使用以下代码：

$(“#message :submit”).attr(“disabled”, “true”);

【讨论】：

感谢您的回答。但是如何禁用非#message div 中的所有输入字段？
使用not 选择器。 $("div:not(#message) :input").attr('disabled', true);

【解决方案2】：

使用 Jquery

jQuery(document).ready(function(){
   const elements = jQuery('div.parent > input')
   elements.each(function(inputField){

      const id = this.id;
      this.disabled = parseInt(id) !== 12 ? true: false
   })
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="parent" class="parent">

  <input type="text" id="1" value="test 1"/> 
  <br/>
  <input type="text" id="2" value="test 2"/> 
  <br/>
  <input type="text" id="12" value="test 12"/> 
  <br/>

</div>

使用 JavaScript

const parentElement = document.getElementById('parent');
const elements = parentElement.querySelectorAll('input');

//disable input fields having id != 12

elements.forEach(function(inputField){
   const id = inputField.id;
   if(parseInt(id) !== 12){
     inputField.disabled = true
   }
})

<div id="parent">

  <input type="text" id="1" value="test 1"/> 
  <br/>
  <input type="text" id="2" value="test 2"/> 
  <br/>
  <input type="text" id="12" value="test 12"/> 
  <br/>

</div>

【讨论】：

如果您同意该解决方案，请接受。谢谢

【解决方案3】：

使用not 选择器。

$("div:not(#message) :input").attr('disabled', true);

$("div:not(#message) :input").attr('disabled', true);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="message">
  <input type="text" value="DIV = MESSAGE ">
</div>
  
<div>
  <input type="text" value="DIV != MESSAGE">
</div>

【讨论】：