Removing attribute disabled on a select menu when a specific box is checked

Question

The code block that I tried to remove disabled attribute from a select menu returns my checkbox validation as true. How do I properly remove the disabled property without messing up my validation?

while($row = mysqli_fetch_assoc($query)){
echo "<h5><input class='check' panel-menu='menu$index'
type='checkbox' name='roomType[]' id='roomType[$index]' 
value='".$row['roomDetailsNo']."'> Choose this Room";

echo "<br>Number of Rooms:&nbsp;";
                echo "<select id='menu$index' name='noOfRooms[".$row['roomDetailsNo']."][]' disabled>";
                $rooms = 0;
                while($rooms <= $row['available_rooms']){
                echo "<option>";
                echo $rooms;
                echo "</option>";
                $rooms++;
                }
                echo "</select><br>";
}

here's my jquery

<script>

$(function(){
    $('#btn').on('click', function(){
        var check = $("input:checked").length;
        if(check <= 0){
            alert("Please Choose a Room");
            return false;
        }
        else{
            $('.check').on('click', function{
            var check = $(this).attr('panel-menu');
            checkbox = $('#'+check).is(':checked');
                if(checkbox){
                    $('#'+check).prop('disabled', false);
                    alert("checked");
                }
            });
            return true;
        }
    });
});

</script>

Possible duplicate of [Remove disabled attribute using JQuery?](http://stackoverflow.com/questions/13626517/remove-disabled-attribute-using-jquery) — momouu, Jan 13 '16 at 14:57
However, he is not validating if one of the checkboxes are checked or not. Mine has and is messing up with my return value. — chemical_elii, Jan 13 '16 at 15:11

score 1 · Accepted Answer · edited May 23 '17 at 12:23

Do not enclose one click event handler inside another click event handler in that case.
Validate both, #btn and .check clicks separately:

$('#btn').on('click', function(){
    var check = $("input:checked").length;
    if(check <= 0){
        alert("Please Choose a Room");
        return false;
    }
});

// you missing parenthesis for function "()":
$('.check').on('click', function(){
    // use data-* attributes (explanation below the code)
    var check = $(this).attr('data-panel-menu');
    if($(this).is(':checked')){
        $('#'+check).prop('disabled', 0);
    }else{
        // if checkbox isn't checked, set the first option as default:
        $('#'+check).prop('disabled', 1).children(':first').prop('selected', 1);
    }
});

JSFiddle demo

Rather than custom panel-menu attribute, you should use data-* attributes. See why.

Removing attribute disabled on a select menu when a specific box is checked

1 Answers1