如何使用jquery切換所有子元素的readonly屬性

Question

描述

所以我有一個有一個按鈕的表單，當點擊時我想切換一個字段集的所有子元素的readonly屬性。

HTML：

 <form> <fieldset id="F1"> <textarea id="T1" rows="5" cols="50" readonly required></textarea><br> <textarea id="T2" rows="5" cols="50" readonly required></textarea><br> <textarea id="T3" rows="5" cols="50" readonly required></textarea><br> </fieldset> <button type="button" id="button" onclick="togglerequire('#F1')"> Click Me </button> </form> 

jquery：

 function togglerequire(id){ $(id).children().each(function(){ var re = $(this).prop('required'); $(this).prop('required', !re); }); } 

回到問題：

我可以通過id為單個元素工作，但是一旦我嘗試對父ID定義的子元素執行切換，它就會停止工作，我無法弄清楚原因。

Answer 1

您需要將該功能更新為以下內容

function togglerequire(id){
    $(id).children("textarea").each(function(){
        var re = $(this).prop('readonly'); 
        $(this).prop('readonly', !re);
    });
}

請注意你正在切換錯誤的財產。 另外，我們可以提供像textarea或類等特定選擇器。

Answer 2

當您使用jquery ，您可以找到一個元素並讓其所有子元素都readonly ，然后像下面的代碼片段一樣調用.toggle ： -

 $('#button').click(function(){ $('#F1').children('[readonly]').toggle(); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <fieldset id="F1"> <textarea id="T1" rows="5" cols="50" readonly required></textarea><br> <textarea id="T2" rows="5" cols="50" readonly required></textarea><br> <textarea id="T3" rows="5" cols="50" readonly required></textarea><br> </fieldset> <button type="button" id="button">Click Me</button> 

同樣的情況是必需的，或者只讀和需要的情況如下：

$('#F1').children('[required]').toggle();// Correct
$('#F1').children('[readonly]').toggle();// Correct
$('#F1').children('[readonly][required]').toggle();// Correct

$('#F1').children('readonly').toggle();// incorrect

注意 ：如果你試圖讓沒有[]的readonly $('#F1').children('readonly').toggle(); 這不會切換。 您需要將[]置於readonly或required或兩者之間。

更新1

因為你想讓它們readonly 。 這是一個片段，它將使所有子元素具有required屬性，只在click event readonly 。

 $('#button').click(function(){ $('#F1').children('[required]').prop('readonly', true); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <fieldset id="F1"> <textarea id="T1" rows="5" cols="50" required></textarea><br> <textarea id="T2" rows="5" cols="50" required></textarea><br> <textarea id="T3" rows="5" cols="50" required></textarea><br> </fieldset> <button type="button" id="button">Click Me</button> 

Answer 3

雖然您已經接受了答案，但我建議如果意圖是阻止用戶與:disabled / readonly狀態中的<textarea>元素進行交互，那么更容易避免迭代這些子節點，而是分配已disabled屬性為父<fieldset> ：

// named function to call:
function toggleActiveStatus() {

  // I'm using native DOM approaches here simply because
  // they're 'cheaper' (premature optimisation, however)
  // than invoking jQuery unnecessarily.

  // here we use let statement to assign the element found
  // by 'document.querySelector()' (which returns the first
  // element matching the supplied CSS selector, or null if
  // there is no matching element) to the 'parent' variable:
  let parent = document.querySelector(

    // here we retrieve the CSS selector held in the
    // <button> element's 'data-affects' custom
    // (and valid) data-* attribute:
    this.dataset.affects
  ),

    // here we find the current state of the
    // element, returned as a Boolean true
    // if the <fieldset> is disabled or
    // false if the <fieldset> is not
    // disabled:
    currentState = parent.disabled;

  // here we simply set the disabled property
  // of the <fieldset> to the inverse of its
  // current state:
  parent.disabled = !currentState;

}

// binding the named function (note the deliberate
// lack of parentheses) using jQuery, rather than
// in-line event-handlers, to avoid the use of
// difficult-to-maintain JavaScript, and switching
// to the 'unobtrusive' JavaScript approach:
$('#button').on('click', toggleActiveStatus);

 function toggleActiveStatus() { let parent = document.querySelector(this.dataset.affects), currentState = parent.disabled; parent.disabled = !currentState; } $('#button').on('click', toggleActiveStatus); 

 body { margin-bottom: 5em; } textarea { display: block; } button { text-transform: sentence; } #F1:disabled+button::before { content: "enable"; } #F1:not(:disabled)+button::before { content: "disable"; } #F1+button::after { content: ' textarea elements'; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form> <fieldset id="F1"> <textarea id="T1" rows="5" cols="50" readonly required></textarea> <textarea id="T2" rows="5" cols="50" readonly required></textarea> <textarea id="T3" rows="5" cols="50" readonly required></textarea> </fieldset> <button type="button" id="button" data-affects="#F1"></button> </form> 

此外，由於jQuery對於此方法不是必需的，因此以下顯示了使用本機DOM API的純JavaScript方法：

function toggleActiveStatus() {
  let parent = document.querySelector(this.dataset.affects),
    currentState = parent.disabled;

  parent.disabled = !currentState;

}

// here we use document.querySelector(), as above, to find
// the first element matching the supplied CSS selector:
document.querySelector('#button')

  // and then use EventTarget.addEventListener() to bind
  // the named function (again: note the deliberate lack
  // of parentheses) as the event-handler for the 'click'
  // event:
  .addEventListener('click', toggleActiveStatus);

 function toggleActiveStatus() { let parent = document.querySelector(this.dataset.affects), currentState = parent.disabled; parent.disabled = !currentState; } document.querySelector('#button').addEventListener('click', toggleActiveStatus); 

 body { margin-bottom: 5em; } textarea { display: block; } button { text-transform: sentence; } #F1:disabled+button::before { content: "enable"; } #F1:not(:disabled)+button::before { content: "disable"; } #F1+button::after { content: ' textarea elements'; } 

 <form> <fieldset id="F1"> <textarea id="T1" rows="5" cols="50" readonly required></textarea> <textarea id="T2" rows="5" cols="50" readonly required></textarea> <textarea id="T3" rows="5" cols="50" readonly required></textarea> </fieldset> <button type="button" id="button" data-affects="#F1"></button> </form> 

參考文獻：

• HTML：
  • 自定義data-*屬性 。
• JavaScript的：
  • document.querySelector() 。
  • EventTarget.addEventListener() 。
  • HTMLFieldsetElement 。
  • let聲明 。
  • 邏輯NOT（ ! ）運算符 。
• jQuery的：
  • on() 。

Answer 4

試試這個：

 function toggleAttributesOn(selector, elementSelector, attribute) { var container = document.querySelector(selector); if(!!container && !!attribute) { var elements = [].slice.call(container.querySelectorAll(elementSelector)); elements.forEach(function(element) { if(['readonly', 'required'].indexOf(attribute) > -1) { element.getAttribute(attribute) !== null? element.removeAttribute(attribute): element.setAttribute(attribute, true); } else { element.setAttribute(attribute, !element.getAttribute(attribute)); } }); } } // demo code function togglerequire(selector) { toggleAttributesOn(selector, 'textarea', 'readonly'); } 

 <form> <fieldset id="F1"> <textarea id="T1" rows="5" cols="50" readonly required></textarea><br> <textarea id="T2" rows="5" cols="50" readonly required></textarea><br> <textarea id="T3" rows="5" cols="50" readonly required></textarea><br> </fieldset> <button type="button" id="button" onclick="togglerequire('#F1')"> Click Me </button> </form> 

Answer 5

這應該可以解決問題。 抓取此div中的所有輸入並將其標記為已禁用。

$（“＃divID：input”）。attr（“disabled”，true）;