javascript - 根据选择的单选/选择选项禁用/启用文本框 Javascript

Question

如果单选按钮具有特定值，我试图禁用 HTML 中的输入字段。我为此使用了 Javascript 函数。

代码片段 1:(HTML 单选按钮)

<div class="element-radio">
    <label class="title">Children</label>
    <div class="column column2">
        <label>
            <input type="radio" name="children" value="Yes" onChange="findselected()"/>
            <span>Yes</span>
        </label>
    </div>
    <span class="clearfix"></span>

    <div class="column column2">
        <label>
            <input type="radio" name="children" value="No" checked="checked" onChange="findselected()"/>
            <span>No</span>
        </label>
    </div>
    <span class="clearfix"></span>
</div>

<div class="element-number">
    <label class="title">No of children</label>
    <div class="item-cont">
        <input class="large" type="text" min="0" max="100" name="no_children" placeholder="If YES, Number of Children?" value="<?php echo $no_children?>" />
        <span class="icon-place"></span>
    </div>
</div>

代码片段 2:(JavaScript 函数)

<script type="text/javascript">
function findselected() { 
   if (document.form.children.value == 'No') {
      document.form.no_children.disabled=true;
//      return false;  // not sure this line is needed
   } else {
      document.form.no_children.disabled=false;
//      return false;  // not sure this line is needed
   }
} 
</script>

这不符合要求的方式。有没有更好的方法来做同样的事情？我对 Javascript 还很陌生，所以我无法实现复杂的代码。

Answer 1

使用以下代码更新您的脚本:

function findselected() { 
    var result = document.querySelector('input[name="children"]:checked').value;
    if(result=="Yes"){

        document.getElementById("inputtext").setAttribute('disabled', true);
    }
    else{
        document.getElementById("inputtext").removeAttribute('disabled');
    }
}

并在您的输入控件中添加 id 属性作为 id="inputtext"。

<input id="inputtext" class="large" type="text" min="0" max="100" name="no_children" placeholder="If YES, Number of Children?" value="<?php echo $no_children?>" />