Need a jquery solution. How to disable certain items when one item selected

Question

i am working on a form that requires some of the options disabled when a particular option is selected. I am a beginner in jquery and need help. thanks.

Here is the link

http://thectiweb.com/booknow_new/

What i need to do is, when we select the first options from the first row of the form, we need to disable some of the options from the second row of options.

Here is my html. Please help me out with 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>

Here is what I have tried so far

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

})

You should read a bit more about jQuery i you are a beginner :) — Alvaro, Jan 22 '14 at 15:38
yeah.. i know. :) can you help me with this one.. a bit of concept on this would lead me to learn more things in Jquery.. thanks — uttamcafedeweb, Jan 22 '14 at 15:41
i tried with the following. but i have no idea what i am doing... — uttamcafedeweb, Jan 22 '14 at 15:42
take a look at this posts, they might help http://stackoverflow.com/questions/2867362/jquery-disable-selected-options http://stackoverflow.com/questions/10570070/how-to-disable-enable-select-field-using-jquery — xhallix, Jan 22 '14 at 15:42

score 0 · Answer 1 · answered Jan 22 '14 at 15:43

Something like this should get you started.

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
}

score 0 · Accepted Answer · answered Jan 22 '14 at 15:44

Here you are

$('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
    }

});

Hope it helps

Need a jquery solution. How to disable certain items when one item selected

2 Answers2