在本地javascript中更改无线电中的事件

Question

我希望在选中单选按钮时启用我的选择框。我的代码适用于此。但如果我选择其他选项。我的选择框没有变为禁用。

这是我的代码：HTML

<div class="flex">
  <div class="first">
    <label class="group">
      <input name="sg-a" type="radio">
      <p>Ganjil - Genap 2D</p>
    </label>
    <label class="group">
      <input name="sg-a" type="radio">
      <p>Besar - Kecil 2D</p>
    </label>
    <label class="group">
      <input name="sg-a" type="radio">
      <p>Tengah - Tepih 2D</p>
    </label>
    <label class="group">
      <input name="sg-a" type="radio">
      <p>Kombinasi 2D</p>
    </label>
  </div>
  <div class="second">
    <label class="group">
      <input name="sg-a" type="radio">
      <p>SHIO</p>
    </label>
    <label class="group">
      <input name="sg-a" type="radio">
      <p>Over / Under</p>
    </label>
    <label class="group">
      <input class="jitu" name="sg-a" type="radio">
      <p>Colok Jitu</p>
      <select disabled>
        <option>As</option>
        <option>Kop</option>
        <option>Kepala</option>
        <option>Ekor</option>
      </select>
    </label>
    <label class="group">
      <input name="sg-a" type="radio">
      <p>4D</p>
    </label>
  </div>
  <input type="submit" value="Cari Data">
</div>

对于Javascript

var jitu = document.getElementsByClassName('jitu');
for(var i = 0; i < jitu.length; i++){
    jitu[i].addEventListener('change', function(){
        (this.checked) ? this.parentNode.children[2].disabled = false : this.parentNode.children[2].disabled = true;
    });
}

感谢那些愿意提供帮助的人。干杯

JSfiddle：https://jsfiddle.net/c3a2q3n8/

Answer 1

您应该为每个输入添加一个类名"jitu"

Answer 2

如果你的html不是动态生成的，那么你可以像这个一样稍微修改你的html

请注意，我为每个无线电输入添加了一个onclick函数和一个唯一的值属性。

<div class="flex">
    <div class="first">
        <label class="group">
            <input name="sg-a" type="radio" onclick="handleClick(this);" value="1">
            <p>
                Ganjil - Genap 2D</p>
        </label>
        <label class="group">
            <input name="sg-a" type="radio" onclick="handleClick(this);" value="2">
            <p>
                Besar - Kecil 2D</p>
        </label>
        <label class="group">
            <input name="sg-a" type="radio" onclick="handleClick(this);" value="3">
            <p>
                Tengah - Tepih 2D</p>
        </label>
        <label class="group">
            <input name="sg-a" type="radio" onclick="handleClick(this);" value="4">
            <p>
                Kombinasi 2D</p>
        </label>
    </div>
    <div class="second">
        <label class="group">
            <input name="sg-a" type="radio" onclick="handleClick(this);" value="5">
            <p>
                SHIO</p>
        </label>
        <label class="group">
            <input name="sg-a" type="radio" onclick="handleClick(this);" value="6">
            <p>
                Over / Under</p>
        </label>
        <label class="group">
            <input class="jitu" name="sg-a" type="radio" onclick="handleClick(this);" value="7">
            <p>
                Colok Jitu</p>
            <select disabled id="jitusl">
                <option>As</option>
                <option>Kop</option>
                <option>Kepala</option>
                <option>Ekor</option>
            </select>
        </label>
        <label class="group">
            <input name="sg-a" type="radio" onclick="handleClick(this);" value="8">
            <p>
                4D</p>
        </label>
    </div>
    <input type="submit" value="Cari Data">
</div>

现在您必须将这个handleClick()放在js中，并检查特定的值以启用/禁用它

<script type="text/javascript">
        function handleClick(myRadio) {
            alert('New value: ' + myRadio.value);
            if (myRadio.value === "7") {
                document.getElementById('jitusl').disabled = false;
            }
            else {
                document.getElementById('jitusl').disabled = true;
            }            
        }
</script>

Answer 3

问题是，当您单击其他选项时，触发器不会被触发，因为所关注的项不是您编写函数的项。

你应该做一个功能，是在每个选项的改变时触发的，小心单选按钮，这样它就知道是禁用还是启用它

var inputs = document.getElementsByTagName('input');
var selectInput = document.getElementById('dropdownSelect');
for(var i = 0; i < inputs.length; i++){
    var input = inputs[i];
    if(input.type!='radio') continue;
    input.addEventListener('change', function(){
        var isJitu = ( this.className && this.className.match(/jitu/) )? true : false;
        selectInput.disabled = !isJitu;
    });
}

<div class="flex">
  <div class="first">
    <label class="group">
      <input name="sg-a" type="radio">
      <p>Ganjil - Genap 2D</p>
    </label>
    <label class="group">
      <input name="sg-a" type="radio">
      <p>Besar - Kecil 2D</p>
    </label>
    <label class="group">
      <input name="sg-a" type="radio">
      <p>Tengah - Tepih 2D</p>
    </label>
    <label class="group">
      <input name="sg-a" type="radio">
      <p>Kombinasi 2D</p>
    </label>
  </div>
  <div class="second">
    <label class="group">
      <input name="sg-a" type="radio">
      <p>SHIO</p>
    </label>
    <label class="group">
      <input name="sg-a" type="radio">
      <p>Over / Under</p>
    </label>
    <label class="group">
      <input class="jitu" name="sg-a" type="radio">
      <p>Colok Jitu</p>
      <select disabled  id="dropdownSelect">
        <option>As</option>
        <option>Kop</option>
        <option>Kepala</option>
        <option>Ekor</option>
      </select>
    </label>
    <label class="group">
      <input name="sg-a" type="radio">
      <p>4D</p>
    </label>
  </div>
  <input type="submit" value="Cari Data">
</div>

Answer 4

我添加了一个全局变量（currentSelect）来跟踪当前的活动选择，并使用了click事件而不是change事件，因为change在不同的浏览器的不同时间触发。我还将事件附加到您所有的单选按钮上，而不仅仅是带有选择的按钮，否则当选择不同的单选按钮时（以及如果您想添加更多选择），它将不会启动

var currentSelect;
function setupClickHandlers() {
    var jitu = document.getElementsByName('sg-a');
    for(var i = 0; i < jitu.length; i++){
        jitu[i].addEventListener('click', function() {
            if (currentSelect) {
               currentSelect.disabled = !currentSelect.parentNode.children[0].checked;
            }
            if (this.parentNode.children[2]) {
                currentSelect = this.parentNode.children[2]
                currentSelect.disabled = !this.checked;
            }
        });
    }
}