Question

如果我选择笔记本电脑单选按钮，则不应启用计算机的输入文本来添加任何数据，背景应为灰色而不是白色。

如果您选择计算机单选按钮，则相同的逻辑，这次是笔记本电脑。

我不知道如何创建它。

谢谢！

<!DOCTYPE html>
<html>
<body>


<form>


    <div class="radio-group">

        <input id="laptop" type="radio" name="device" value="laptop" checked>
        <span class="radio-choice-name">
            <label for="laptop">laptop</label>
            <input type="text" value="" />
        </span>

        </BR>


        <input id="computer" type="radio" name="device" value="computer">
        <span class="radio-choice-name">
            <label for="computer">computer</label>
            <input type="text" value=""" />
        </span>         

    </div>


</form> 

</body>
</html>

Answer 1

将id输入到输入，然后在选定的收音机上禁用计算机的其他输入ID并启用笔记本电脑的输入

$(document).ready(function(){
    $('input[type=radio][name=sex]').click(function(){
        var related_class=$(this).val();
        $('.'+related_class).prop('disabled',false);

        $('input[type=radio][name=sex]').not(':checked').each(function(){
            var other_class=$(this).val();
            $('.'+other_class).prop('disabled',true);
        });
    });
});

Simmilar Fiddle Example

Answer 2

您可以在jQuery中执行以下操作。如果您需要纯粹的JavaScript解决方案，请告诉我。

＆＃13;

$(document).ready(function(){
    $(".radio-group").on("change", ":radio", function() {     
        $(":text").prop("disabled", true);
        $(this).next(".radio-choice-name").find(":text").prop("disabled", false);
    });
});

＆＃13;

input[disabled] { background-color: #eee }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
    
    
    <div class="radio-group">
        
        <input id="laptop" type="radio" name="sex" value="laptop" checked />
            <span class="radio-choice-name">
                <label for="laptop">laptop</label>
                <input type="text" value="" />
            </span>
            
            <br/>
        
        
            <input id="computer" type="radio" name="sex" value="computer" />
            <span class="radio-choice-name">
                <label for="computer">computer</label>
                <input type="text" value="" disabled />
            </span>         

    </div>


</form>

＆＃13;

Answer 3

使用jQuery尝试类似下面的内容：

<强> HTML

<form>


<div class="radio-group">

    <input id="laptop" type="radio" name="sex" value="laptop" checked>
    <span class="radio-choice-name">
        <label for="laptop">laptop</label>
        <input id="laptopVal" type="text" value="" />
    </span>

    </BR>


    <input id="computer" type="radio" name="sex" value="computer">
    <span class="radio-choice-name">
        <label for="computer">computer</label>
        <input id="computerVal"type="text" value=""" />
    </span>         

</div>

<强> JAVASCRIPT

    $( document ).ready(function() {
    function handleClick(el) {
        $('input[type=text]').css('background-color', 'grey');
        $('input[type=text]').attr('readonly', 'true');
        $('#' + el.attr('id') + 'Val').css('background-color', 'white');
        $('#' + el.attr('id') + 'Val').attr('readonly', 'false');
    }
    handleClick($('#laptop'));

    $("input:radio").click(function() {
      handleClick($(this));
    });
   });

WORKING FIDDLE

Answer 4

我在下面的html中稍作修改，只是添加了＆＃34; class＆＃34;输入文本的属性和与单选按钮值相同的赋值。

<!DOCTYPE html>
  <html>
   <body>
     <form>
       <div class="radio-group">
        <input id="laptop" type="radio" name="device" value="laptop" checked>
         <span class="radio-choice-name">
          <label for="laptop">laptop</label>
          <input class="laptop" type="text" value="" />
         </span>
       <br>
       <input id="computer" type="radio" name="device" value="computer">
       <span class="radio-choice-name">
        <label for="computer">computer</label>
        <input class="computer" type="text" value="" disabled/>
       </span>         
     </div>
   </form> 
 </body>
</html>

这是javascript：

<script type="text/javascript">
 $(function () {
    $('input:radio').on('change', function(){
               var value = $(this).val();
               $('.radio-group').find('input[type=text]').attr('disabled', 'disabled');
               $('.' + value).removeAttr('disabled');

       }
    );
});
</script>

我认为你会发现这种非常简单的方法。

通过选择单选按钮来禁用输入文本

4 个答案: