更改“已停用”＆＃39;使用javascript属性

Question

我的按钮属性有问题。是或否改变无关紧要。我怀疑这里的问题是button.disabled，因为它没有突出显示“＃34;禁用＆＃34;”这个词。

＆＃13;

＆＃13;

window.onload = function() 
{
    var button = document.getElementsByName("button");
    var regulamin = document.getElementsByName("accept");
 
 	//console.log(button);

   for (var i = 0; i < regulamin.length; i++)
   {
       regulamin[i].onclick = function()
       { 
       	//alert(this.value === "true");  <-- here is OK
           button.disabled = (this.value === "true");  <-- not OK
       };
   }

};

＆＃13;

<form>
    <div>
        <label><input type="radio" name="accept" value="true" checked>NO</label>
        <label><input type="radio" name="accept" value="false">YES</label>
    </div>
    <button type="submit" name="button" disabled>REGISTER</button>
</form>

＆＃13;

＆＃13;

＆＃13;

Answer 1

<强>样本

＆＃13;

＆＃13;

window.onload = function() 
{
    var button = document.getElementsByName("button")[0];
    var regulamin = document.getElementsByName("accept");
 
 	console.log(button);

   for (var i = 0; i < regulamin.length; i++)
   {
       regulamin[i].onclick = function()
       { 
       	//alert(this.value === "true");  <-- here is OK
           button.disabled = (this.value === "true");  
       };
   }

};

＆＃13;

<form>
    <div>
        <label><input type="radio" name="accept" value="true" checked>NO</label>
        <label><input type="radio" name="accept" value="false">YES</label>
    </div>
      	<button type="submit" name="button" disabled>REGISTER</button>
</form>

＆＃13;

＆＃13;

＆＃13;

getElementsByName重新生成一个具有相同名称的元素数组。所以你需要选择你想要的元素。您只有一个按钮，因此您可以访问document.getElementsByName("button")[0]

等元素

Answer 2

你可以

• 定位您指定的单选按钮
• forEach→分配change事件处理程序
• 检索.closest（父）form
• 而不是返回DOM并找到您的type="submit"

^{的 9}

Array.from(document.querySelectorAll("[name='accept']")).forEach( radio => {
  radio.addEventListener("change", function() {
    this.closest("form").querySelector("[type='submit']").disabled = this.value === "true";
  });
});

<form>
  <div>
    <label><input type="radio" name="accept" value="true" checked>NO</label>
    <label><input type="radio" name="accept" value="false">YES</label>
  </div>
  <button type="submit" name="button" disabled>REGISTER</button>
</form>

通过上述内容，您甚至可以在一个页面上拥有多个表单 - 因为封装的DOM遍历。

Array.from(document.querySelectorAll("[name='accept']")).forEach( radio => {
  radio.addEventListener("change", function() {
    this.closest("form").querySelector("[type='submit']").disabled = this.value === "true";
  });
});

<h3>Multiple forms</h3>

<form>
  <div>
    <label><input type="radio" name="accept" value="true" checked>NO</label>
    <label><input type="radio" name="accept" value="false">YES</label>
  </div>
  <button type="submit" name="button" disabled>REGISTER</button>
</form>

<form>
  <div>
    <label><input type="radio" name="accept" value="true" checked>NO</label>
    <label><input type="radio" name="accept" value="false">YES</label>
  </div>
  <button type="submit" name="button" disabled>REGISTER</button>
</form>

<form>
  <div>
    <label><input type="radio" name="accept" value="true" checked>NO</label>
    <label><input type="radio" name="accept" value="false">YES</label>
  </div>
  <button type="submit" name="button" disabled>REGISTER</button>
</form>

Answer 3

您需要更改＆＃34;名称＆＃34;到一个＆＃34; id＆＃34;然后通过＆＃34; id＆＃34;获取它的元素。请参阅下面的代码。 “是”按钮切换现在可以正常工作。

HTML：

    <form>
        <div>
            <label><input type="radio" name="accept" value="true" checked>NO</label>
            <label><input type="radio" name="accept" value="false">YES</label>
        </div>
        <button type="submit" id="button">REGISTER</button>
    </form>

使用Javascript：

window.onload = function () {
    var button = document.getElementById("button");
    var regulamin = document.getElementsByName("accept");
    button.disabled = true;
    //console.log(button);

    for (var i = 0; i < regulamin.length; i++) {
        regulamin[i].onclick = function () {
            //alert(this.value === "true");  <-- here is OK
            if (button.disabled) {
                button.disabled = false;
            } else {
                button.disabled = true;
            }                
        };
    }
};

Answer 4

我认为你输入元素的名称属性是相同的，你得到 getElementByName 。这两者都是真实的。

尝试为其他输入元素提供不同的name属性。