如何使用单选按钮启用/禁用HTML中的选择框 [英] How do I enable/disable select box in HTML with radio button

查看：1040 发布时间：2019/6/11 14:33:54 Javascript HTML

本文介绍了如何使用单选按钮启用/禁用HTML中的选择框的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

当我选择html页面上的第二个单选按钮时，我想要一个启用选择框的脚本，反之亦然。

代码如下：

<！DOCTYPE html>

< html>

< head>

< meta charset =utf-8>

< meta name =viewportcontent =width = device-width> ;

< title> JS Bin< / title>

< / head>

< body>

< input type =radio

name =radSize

id =generic_test

value =false选中=已检查/>

< label for =generic_test>通用测试< / label>

<输入type =radio

name =radSize

id =project_test

value =true/>< label for =project_test>项目测试< / label>

< select>

< option disabled =disabled> 1< / option>

< option selected =selected> 2< / option>

< option disabled =已禁用> 3< / option>

< / select>

< / body>

< / html>

我尝试了什么：

我尝试使用readonly标签但是，但是选择框不会被禁用。

解决方案

尝试使用以下代码：

Javascript代码

< script type =  文本/ JavaScript的> 
  function  handleClick（myRadio）{
  if （myRadio.value == < span class =code-string>  true）
 {
  document  .getElementById（  ddlProject）。disabled = 假; 
} 
  else  
 {
  document  .getElementById （  ddlProject）。disabled =  true ; 
} 
} 
< / script>

HTML code

 <  输入    type   =  radio    name   =  radSize    id   =  generic_test    value   =  false   已选中  = 已选中    onclick   =  handleClick（this）;  /  >  
 <   label       =  generic_test > 通用测试<   / label  >  
 
 <  输入    type   =  radio    name   =  radSize    id   =   project_test    value   =  true    onclick   =  handleClick（this）;    /  >  
 <   label     for   =  project_test > 项目测试<   / label  >  
 
 <   select    已禁用  = < span class =code-keyword> disabled    id   =  ddlProject >  
 <  选项 >  1 <   / option  >  
 <  选项   已选择  = 已选择 >  2 <   / option  >  
 <  选项 >  3 <   / option  >  
 <   / select  >

 
 
< pre lang =HTML> < html >
< head > ;
< meta charset = utf-8 >
< meta 名称 = viewport content = width = device-width >
< title > JS Bin < / title >
< / meta > < / meta > < / head >
< style >
body ， html {
margin ： 2％;
padding ： 0;
height ： 50％;
align < span class =code-keyword>： center;
}
< / style >
< body >
< td height = 24 width = 550px align = < span class =code-keyword> left valign = middle >
< span class =code-keyword>< span class = f1 > TC类型< span class = star > < span class = 星级 > * < / span > < / span > < / span >
< input type = radio 名称 = radSize id = tc_type value = false 已检查 = 选中 / >
< 标签 = tc_type > 通用测试< / label >
< 输入类型 = radio >
name =radSize
id =tc_type
value =trueonclick =handleC舔（本）; />
< label < span class =code-attribute> for = tc_type > 项目测试< / label >
< p >

< tr >
< td height = 24 width = 50 align = left >
valign =middle>
< span < span class =code-attribute> class = f1 > 多相< span class = star > * < / span > < / span >
< / td >
< td 对齐 = left valign = middle nowrap = nowrap >
< 选择 id = multiphase >
disabled =disabled
平变化= onChangeFunction（）; >
< 选项 < span class =code-attribute> value = 已选择 = 已选择 > < / option >
< 选项值 = 是 > 是< < span class =code-leadattribute> / option >
< 选项 value = 否 > 否< / option >
< /选择 >
< / td >
< / tr >
< p >
< tr >
< td width = 126 height = 24 align = left >
valign =middle>
< span < span class =code-attribute> class = f1 > 项目ID < span class = 星级 > * < / span > < / span >
< / td >
< td 宽度 = 126 height = 24 align = 左 >
valign =middle>
< 输入 < span class =code-attribute> type = text >
name =project_idid =project_idsize =19
value =readonly =readonly>
< / input > < / td >
< / tr >
< p >
< tr >
< td class = f1 > 文字< span class = star > * < / span > < / td >
< td >
< textarea id = textInputField3 >
name =textInputField3
风格=调整：垂直;文本对齐：顶部;
rows =5
cols =52
readonly =readonly> < / textarea >
< / td >
< / tr >
< / p > < / p > < / p > < /输入 <温泉n class =code-keyword>> < / td > < / body >
< / html >
< pre lang = Javascript >

< script type =text / javascript >

函数handleClick（myRadio）{

if（myRadio.value ==true）{

document.getElementById（multiphase ）。disabled = false;

}

else {

document.getEleme ntById（multiphase）。disabled = true;

}

}

< / script>
 
 

host ='localhost';

Hi,

I wanted a script to enable select box when 2nd radio button on html page is selected and vice-a-versa.
Code is as below:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<input type="radio"
name="radSize"
id="generic_test"
value="false" checked="checked" />
<label for="generic_test">Generic Test</label>

<input type="radio"
name="radSize"
id="project_test"
value="true" /><label for="project_test">Project Test</label>
<select>
<option disabled="disabled">1</option>
<option selected="selected">2</option>
<option disabled="disabled">3</option>
</select>
</body>
</html>

What I have tried:

I tried with readonly tag but, but select box does not get disabled.

解决方案

Try with below code:

Javascript code

<script type="text/javascript">
function handleClick(myRadio) {
	if(myRadio.value== "true")
	{
	document.getElementById("ddlProject").disabled = false;
	}
	else
	{
	document.getElementById("ddlProject").disabled = true;
	}
}
</script>

HTML code

<input type="radio" name="radSize" id="generic_test" value="false" checked="checked" onclick="handleClick(this);"/>
<label for="generic_test">Generic Test</label>

<input type="radio" name="radSize" id="project_test" value="true" onclick="handleClick(this);" />
<label for="project_test">Project Test</label>

<select disabled="disabled" id="ddlProject">
<option>1</option>
<option selected="selected">2</option>
<option>3</option>
</select>

<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>JS Bin</title>
</meta></meta></head>
<style>
    body, html {
        margin: 2%;
        padding: 0;
        height: 50%;
        align: center;
    }
</style>
<body>
    <td height="24" width="550px" align="left" valign="middle">
        <span class="f1">  TC Type <span class="star"><span class="star">*</span></span></span>
        <input type="radio" name="radSize" id="tc_type" value="false" checked="checked" />
        <label for="tc_type">Generic Test</label>
        <input type="radio">
               name="radSize"
               id="tc_type"
               value="true" onclick="handleClick(this);" />
        <label for="tc_type">Project Test</label>
        <p>

            <tr>
                <td height="24" width="50" align="left">
                    valign="middle">
                    <span class="f1"> Multiphase <span class="star">*</span></span>
                </td>
                <td align="left" valign="middle" nowrap="nowrap">
                    <select id="multiphase">
                            disabled="disabled"
                            onchange="onChangeFunction();">
                        <option value="" selected="selected"></option>
                        <option value="Yes">Yes</option>
                        <option value="No">No</option>
                    </select>
                </td>
            </tr>
        <p>
            <tr>
                <td width="126" height="24" align="left">
                    valign="middle">
                    <span class="f1">Project ID <span class="star">*</span></span>
                </td>
                <td width="126" height="24" align="left">
                    valign="middle">
                    <input type="text">
                           name="project_id" id="project_id" size="19"
                           value="" readonly="readonly">
                </input></td>
            </tr>
        <p>
            <tr>
                <td class="f1">   Text<span class="star">*</span>   </td>
                <td>
                    <textarea id="textInputField3">
                              name="textInputField3"
                              style="resize:vertical; text-align:top;  "
                              rows="5"
                              cols="52"
                              readonly="readonly"></textarea>
                </td>
            </tr>
</p></p></p></input></td></body>
</html>
<pre lang="Javascript">

host='localhost';

这篇关于如何使用单选按钮启用/禁用HTML中的选择框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文

如何使用单选按钮启用/禁用HTML中的选择框 [英] How do I enable/disable select box in HTML with radio button

问题描述

相关文章

其他开发语言最新文章

热门教程

热门工具

登录关闭

如何使用单选按钮启用/禁用HTML中的选择框 [英] How do I enable/disable select box in HTML with radio button

问题描述

相关文章

其他开发语言最新文章

热门教程

热门工具

登录 关闭

登录关闭