限制单选按钮显示，javascript

Restrict radio button display, javascript

本文关键字：javascript 显示 单选按钮      更新时间：2023-09-26

我有一个下拉列表。当点击其中一个项目时，它应该显示单选按钮来显示。

我一直到这里。现在的问题是

我有四个单选按钮。我想显示2个选项并隐藏2个选项。在javascript中,

我该怎么做?

可以使用jquery

$(function() {
    $('#dropdownId').change(function() { //when the dropdown change
        var selectValue = $(this).val(); //Get it's value
        if (selectValue == 1) {
            $("#radioButtonId1").show();
            $("#radioButtonId2").show();
            $("#radioButtonId3").hide();
            $("#radioButtonId4").hide();
        }
    });
}

你也可以在你的选项上使用数据来获得需要显示的选项:

<input type = "radio" class="DependOnSelect" data-showonid="1,3,5" />
<input type = "radio" class="DependOnSelect" data-showonid="2,4,6" />
<input type = "radio" class="DependOnSelect" data-showonid="1,4,6" />
<input type = "radio" class="DependOnSelect" data-showonid="2,3,5" />
$(function() {
    $('#dropdownId').change(function() {
        var selectValue = $(this).val();
        if (selectValue == 1) {
            $('.DependOnSelect').each(function() { //for each Options
                var splited = $(this).data("showonid").split(','); 
                if (jQuery.inArray(selectValue, splited) > -1)
                    $(this).show(); // if the data-showonid contains the id, show it
                else
                    $(this).hide();                    
            });
        }
    });
}

JSFIDLE在jquery中禁用元素

$('#ElementId').attr("disabled", "disabled);

:

$('#ElementId').removeAttr("disabled");

Html: 

<select id="dropdownId" onChange="jsFunction()">
    <option value='1'>1</option>
    <option value='2'>2</option>
    <option value='3'>3</option>
    <option value='4'>4</option>
</select>
<br/>
<input type="radio" name="option" id="option1" />1
<br/>
<input type="radio" name="option" id="option2" />2
<br/>
<input type="radio" name="option" id="option3" />3
<br/>
<input type="radio" name="option" id="option4" />4
<br/>
javascript: 

function jsFunction() {
    var myselect = document.getElementById("dropdownId");
    var value = myselect.options[myselect.selectedIndex].value;
    if (value == 1) {
        document.getElementById('option1').disabled = 'disabled';
    } else {
        document.getElementById('option1').disabled = '';
    }
    if (value == 2) {
        document.getElementById('option2').disabled = 'disabled';
    } else {
        document.getElementById('option2').disabled = '';
    }
    if (value == 3) {
        document.getElementById('option3').disabled = 'disabled';
    } else {
        document.getElementById('option3').disabled = '';
    }
    if (value == 4) {
        document.getElementById('option4').disabled = 'disabled';
    } else {
        document.getElementById('option4').disabled = '';
    }
}

JSFIDLE

嗨，你可以使用"disabled"来禁用任何特定的选项

<input type="radio" name="someName" value="someValue" id="someId" disabled>
Then get the two options you want to hide and make display = "none";
相关文章：