Hide the input field div class using javascript

Question

I have a payment form,in which when I click on the internet banking ,all the input field be disabled and instead show some images. this is the fiddle upto which i have done http://jsfiddle.net/f8Fd3/4/ No where I cant hide the input text field using their class id.

this is the js

function cc()
{
     $('#cards.credit-card').removeClass("visa mastercard").addClass("visa");

}

function dc()
{
    $('#cards.credit-card').removeClass("visa mastercard").addClass("mastercard");
}
function ib()
{

}

please check the fiddle to get a clear picture

Answer 1

You want to select all input & select elements and set their property disabled to true :

$('#cards input, #cards select').prop('disabled', true);

Fiddle

Answer 2

The syntax class="class=tokenex_data full gr-input" is incorrect.

Instead use, class="tokenex_data full gr-input" 

Then use : 

`function ib()
{
    $(".tokenex_data").hide();
    $(".monthgr-input").hide();
}


`

Answer 3

It is because, by default, when 'button' tag inside a 'form' is clicked, 'form' will be submitted.

It's not redirecting for the other two because there's a HTML5 form validation that prevents the form from being submitted. (that's why you will see an error message when you click Visa/Mastercard)

if you insist on binding events in the dom...you can pass an event object to the handler:

<button onclick="javascript:ib(event)" class="btn btn-1 btn-1c">Internet Banking</button>

and in your function:

function ib(event) {
  event.preventDefault();
}

you may wanna do the same to the other two handlers as well.

so the default submit action will be prevented.

and to disable all the text fields:

$('#cards input[type=text]').prop('disabled', true);

to hide them:

$('#cards input[type=text]').hide();

EDIT

by the way. you don't have to use selectors like $('#cards.credit-card'), 'id' should be unique in the DOM, just by using $('#cards') you will get the same element.