【问题标题】:Need a jquery solution. How to disable certain items when one item selected需要一个 jquery 解决方案。选择一个项目时如何禁用某些项目
【发布时间】:2014-02-12 18:26:42
【问题描述】:

我正在处理一个表单,该表单需要在选择特定选项时禁用某些选项。我是 jquery 的初学者,需要帮助。谢谢。

这是链接

http://thectiweb.com/booknow_new/

我需要做的是,当我们从表单的第一行选择第一个选项时,我们需要禁用第二行选项中的一些选项。

这是我的html。请帮助我使用 Jquery

HTML

<form id="calx">

    <div class="container">



        <div class="span10">


        <div class="row-fluid service">
        <h3>step 1: Select Your Service*</h3>
        <input id="proc1" type="radio" name="proc" value="100"><label for="proc1"><img src="img/simply.png" width="120"><br></label>
        <input id="proc2" type="radio" name="proc" value="150"><label for="proc2"><img src="img/pristine.png"  width="120"><br></label>
        <input id="proc3" type="radio" name="proc" value=""><label for="proc3"><img src="img/custom.png"  width="120"><br></label>


        </div>


        <div class=" row-fluid beds">
            <h3>numbers of bedrooms</h3>
            <input id="beds1" type="radio" name="beds" value="10"><label for="beds1"><img src="img/1.png"><br><small>one bedroom apt</small></label>
            <input id="beds2" type="radio" name="beds" value="20"><label for="beds2"><img src="img/2.png"><br><small>two bedroom apt</small></label>
            <input id="beds3" type="radio" name="beds" value="30"><label for="beds3"><img src="img/3.png"><br><small>three bedroom house</small></label>
            <input id="beds4" type="radio" name="beds" value="40"><label for="beds4"><img src="img/4.png"><br><small>four bedroom house</small></label>
            <input id="beds5" type="radio" name="beds" value="50"><label for="beds5"><img src="img/5.png"><br><small>five bedroom house</small></label>
        </div>


                <input type="submit" value="BOOK YOUR APPOINTMENT" class="btn btn-primary btn-large bttm" />


        </div>
    </div>
</table>
</form>

这是我迄今为止尝试过的

$(document).ready(function() { 
    $(".service").children('input').hide(); 
    $(".service").change(function() {
        $(".beds").children('input').hide(); 
        $(".beds").children("input[value^=" + $(this).val() + "]").show() 
    }) 

})

【问题讨论】:

  • 如果你是初学者,你应该阅读更多关于 jQuery 的内容 :)
  • 是的..我知道。 :) 你能帮我解决这个问题吗……对此有一点概念会让我在 Jquery 中学习更多东西……谢谢
  • 我尝试了以下方法。但我不知道我在做什么...

标签: javascript jquery html


【解决方案1】:

你来了

$('input[name=proc]').click(function(){
    $('input[name=beds]').prop('disabled', false);
    if($(this).is('#proc1')){
        $('#beds1, #beds3').prop('disabled', true); //Disablin beds1 and beds3
    } else if ($(this).is('#proc2')) {
        //disable other buttons for proc2
    } else {
        //disable other buttons for proc3
    }

});

希望对你有帮助

【讨论】:

    【解决方案2】:

    这样的事情应该可以帮助您入门。

    var checkedId = $('form input[type=radio]:checked').attr('id'); //get the id of the checked radio button in the first set
    if(checkId = 'proc1'){
        $('#beds1').prop('disabled', true); //disable radio button in the second set
    }
    

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2023-01-26
      • 1970-01-01
      相关资源
      最近更新 更多