Question

是否可以根据所选的单选按钮禁用和更改文本框的样式？

例如，只有选择“项目”时才需要启用“REF”和“标题”文本框，如果选择“帐户”，则需要“名称”。

HTML：

<div id="container">
    <div class="table">
        <div class="tr">
            <div class="td td1">
                <input type="radio" name="section1a" id="radio1-1" value="radio" />
                <label class="large black" for="radio1-1">Project</label>
            </div>
            <div class="td td2"> <span class="large black">Ref:</span> 
            </div>
            <div class="td td3">
                <input class="form-textbox" name="ref" type="text" placeholder="Insert project reference" />
            </div>
        </div>
        <div class="tr">
            <div class="td td1"></div>
            <div class="td td2"> <span class="large black">Title:</span> 
            </div>
            <div class="td td3">
                <input class="form-textbox" name="title" type="text" placeholder="Insert project title" />
            </div>
        </div>
        <div class="tr">
            <div class="td td1">
                <input type="radio" name="section1a" id="radio1-2" value="radio" />
                <label class="large black" for="radio1-2">Account</label>
            </div>
            <div class="td td2"> <span class="large black">Name:</span> 
            </div>
            <div class="td td3">
                <input class="form-textbox" name="name" type="text" placeholder="Insert account name" />
            </div>
        </div>
        <div class="tr">
            <div class="td td1">
                <input type="radio" name="section1a" id="radio1-3" value="radio" />
                <label class="large black" for="radio1-3">General Business</label>
            </div>
            <div class="td td2"></div>
            <div class="td td3">
                <input class="form-textbox" name="organization" type="text" placeholder="Insert client organisation name" />
            </div>
        </div>
    </div>
</div>

Answer 1

您可以使用禁用来禁用javascript中的控件，向您的单选按钮添加一个事件监听器并设置，这是一个例子：

var rbProject = document.getElementById('radio1-1');

rbProject.addEventListener('change', function (e) {
    txtRef.disabled = false;
    txtTitle.disabled = false;
    txtName.disabled = true;
})

这FIDDLE告诉你它是如何完成的！

Answer 2

您可以使用jQuery轻松完成此操作。以下是如何更改元素的CSS的示例：

$(yourSelectorHere).css({ "font-weight": "bold",
        "color": "black"
});

以下是禁用/重新启用元素的方法：禁用：

$(yourSelectorHere).attr("disabled", "disabled");

启用：

$(yourSelectorHere).removeAttr("disabled");

希望这有助于您入门。供参考，以下是jQuery API的链接： http://api.jquery.com/css/ http://api.jquery.com/attr/

Answer 3

您需要做的基本事情是检查选中了哪个单选按钮。现在，jQuery附带了一个.change()方法，在您的情况下可以像：

一样使用

$(":radio").change(function() {

现在，您没有任何与您的无线电相关的value属性，您应该这样做！（然后你可以检查this.value，例如：与项目相关联的广播应该有value='project'作为属性。

所以，现在你要检查选择了哪个收音机：

var value = this.value; 
//if you dont have a value yet, I see you have labels with text
var value = $(this).next("label").text(); //although this way is ugly IMO

现在，检查选择了哪一个！

if (value == "Project") {
    //A project radio is selected
    $(":text").prop("disabled", true); //this line is key, it disables all textboxes on change, now you enable the ones that you need
    //Enable boxes that match criteria
}

这就是它的基础。

Answer 4

即使stackoverflow不是用于创建完整的代码行，如果您熟悉jquery，也可以使用这个。

您可以使用addClass函数添加CSS类。

http://api.jquery.com/addclass/

Answer 5

我知道情况并非完全相同：

http://codepen.io/craig-wayne01/pen/LqeHl

<fieldset>
<input type=radio name=category><label>Project</label>
<label>Ref:</label><input type=text>
<label>Title:<label><input type=text>
</fieldset>

<fieldset>
<input type=radio name=category><label>Account</label><label>Name:</label><input type=text>
</fieldset>

<fieldset>
<input type=radio name=category><label>General Business</label><input type=text>
</fieldset>

<style>

fieldset{
border:none;
}

fieldset>label:first-of-type{
width:150px;
display:inline-block;
vertical-align:top;
}

fieldset>label:not(:first-of-type){
display:inline-block;
}

input[type=radio]:not(:checked)+label ~*{
opacity:0;
}

input[type=radio]:checked+label ~*{
opacity:1;
}
</style>

根据所选的单选按钮禁用/隐藏文本框？

5 个答案: