单选按钮事件处理

时间:2012-04-17 08:17:35

标签: javascript javascript-events dojo radio-button

我有一个单选按钮,我想在没有选中(选中)单选按钮中的特定值时禁用文本字段。我正在使用dojo的单选按钮。你能帮我解决这个问题吗?

    <dt><label for="Records_Size">Test Run Size</label></dt>
    <dd>
        <input id="Records_All" type="radio" dojoType="dijit.form.RadioButton" name="SourceQuery" checked 
        value="All"></input>
        <label for="Records_All">All input records</label>
    </dd>
    <dt>&nbsp;</dt>
    <dd>
        <span><input id="Records_Query" type="radio" dojoType="dijit.form.RadioButton" name="SourceQuery" 
        value="Query" ></input>
        <label for="Records_Query">Limit input records to:</label></span><span>&nbsp;<input type="text"
        dojoType="dijit.form.TextBox" id="Row_Count" style="width: 25px;" value="10"/></span>
    </dd>

The radio buttons on my UI

基本上,我需要一个事件,当这个按钮失去焦点时会触发该事件,并且只要事件恢复它就会触发一个事件,但两个事件的处理都不同。

1 个答案:

答案 0 :(得分:2)

如果你想要纯粹的客户端活动,那么......

<script>
function ManageTextBox(el){
    t=document.getElementById('Row_Count');
    if (el.value=='Query') {t.disabled=false}
       else {t.disabled=true}
    }
</script>

<dt><label for="Records_Size">Test Run Size</label></dt>
<dd>
    <input id="Records_All" type="radio" dojoType="dijit.form.RadioButton" name="SourceQuery" checked
    value="All" onchange="ManageTextBox(this)"></input>
    <label for="Records_All">All input records</label>
</dd>
<dt>&nbsp;</dt>
<dd>
    <span><input id="Records_Query" type="radio" dojoType="dijit.form.RadioButton" name="SourceQuery" 
    value="Query" onchange="ManageTextBox(this)"></input>
    <label for="Records_Query">Limit input records to:</label></span><span>&nbsp;<input type="text"
    dojoType="dijit.form.TextBox" id="Row_Count" style="width: 25px;" value="10"/ disabled></span>
</dd>

请注意,每个单选按钮都会获得onchange属性,并且由于“全部”单选按钮开始选中,因此文本框需要从disabled开始。更改单选按钮的值会调用根据按钮的新值更改文本框状态的功能。

http://jsfiddle.net/LyStj/